问题描述
我正在尝试在前端脚本中导入npm模块.据说模块必须在顶层才能导入,但据我所知,它在顶层.也许我的Web服务器弄乱了我的代码.我不确定
I am trying to import a npm module in the front end script. It is saying modules must be on top level to import but it is at the top level from what I can tell. Maybe my web server is messing with my code. I am unsure.
现在的代码很丑陋,因为我想让所有东西都摆好位置.
The code is ugly right now because I am trying to get everything situated.
我已经尝试过
<script type='module' src='./js/scripts.js'></script>
scripts.js
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模块.
I am wanting to be able to import npm modules.
推荐答案
裸模块导入在浏览器中不起作用.您需要使用Web服务器可以服务的文件的相对路径(而不仅仅是NPM软件包名称/ node_modules
中的软件包导出的模块,而不是服务目录)可以使用提供的项目根目录将代码从 node_modules
生成捆绑包的相对路径/拉动工具链.
Bare module imports won't work in the browser. You need to use relative paths to a file that can be served by your web server (and not simply the NPM package name/a module exported by a package in node_modules
and not a served directory), or a toolchain that can use a provided project root to generate the relative paths/pull in code from node_modules
into a bundle.
您没有提供完整的设置,但是使用隐式层次结构,我得到了 Uncaught TypeError:无法解析模块说明符"axios".相对引用必须以"/"、./"或"../"开头.
在Chrome中,与上述问题一致.
You didn't provide your entire setup, but using the implied hierarchy, I get Uncaught TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../".
in Chrome, which is consistent with the above issue.
这篇关于SyntaxError:导入声明只能出现在模块的顶层.使用Express,没有Webpack的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!