Question

我正在尝试在前端脚本中导入npm模块。这是说模块必须在顶层才能导入，但据我所知，它在顶层。也许我的Web服务器弄乱了我的代码。我不确定

代码现在很丑，因为我正试图让所有东西都摆好位置。

我已经尝试过

<script type='module' src='./js/scripts.js'></script>

scripts.js

import axios from 'axios';


function getQueryStringValue (key) {  
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
}  
const query = getQueryStringValue('code');

class chime {
    constructor(code) {
        this.code = code;
    };
    async logIn() {
        const response = await axios.post('url', {
            'client_id': '',
            'client_secret': '',
            'grant_type': '',
            'redirect_uri': 'https://localhost:3000',
            'code': this.code
        });

        console.log(response);
    }
    test() {
        console.log(this.code);
    }
}

if (query) {
    const client = new chime(query);

    client.logIn();

};

var express = require('express')
var fs = require('fs')
var https = require('https')
var app = express()
const path = require('path');

const publicPath = path.join(__dirname, '../public');
const port = 3000;

app.use(express.static(publicPath));



app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, '/index.html'));
});


https.createServer({
  key: fs.readFileSync(path.join(__dirname + '/ssl/server.key')),
  cert: fs.readFileSync(path.join(__dirname+ '/ssl/server.cert'))
}, app)
    .listen(3000, function () {
    console.log('Example app listening on port 3000! Go to https://localhost:3000/')
    });

我希望能够导入npm模块。

Answer 1

import axios from 'axios';

裸模块导入在浏览器中不起作用。您需要使用可以由您的Web服务器提供服务的文件的相对路径（而不仅仅是NPM软件包名称/由node_modules中的软件包而非服务目录导出的模块），或者可以使用使用提供的项目根目录将代码中的相对路径/拉从node_modules生成捆绑。

这是说模块必须在顶层才能导入，但据我所知，它在顶层

您没有提供完整的设置，但是使用隐式层次结构，我在Chrome中得到Uncaught TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../".，与上述问题一致。

Answer 2

一种快速而肮脏的方法是使用CDN：

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

将其放在JavaScript标记上方的html文件中

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type='module' src="../app.js"></script>
</body>

Answer 3

花了2个小时终于找到了解决方案，您要做的第一件事是

npm i parcel-bundler -D

然后package.json添加以下两行代码

"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}

最终

npm run dev.

如果您仍然遇到问题，请open this link，它为我节省了很多时间。

SyntaxError：导入声明只能出现在模块的顶层。使用Express，无Webpack

3 个答案: