javascript 我无法解决“Uncaught SyntaxError：无法在模块外使用导入语句”的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/58206020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I can't fixed a problem of "Uncaught SyntaxError: Cannot use import statement outside a module"
提问by SA Noyon Ahmed
I have "three" files in one folder 1. index.html 2. index.js 3. helper.js
我在一个文件夹中有“三个”文件 1. index.html 2. index.js 3. helper.js
I want to export code from helper.jsand import code to index.js(I already link up index.jsto index.html).
我想从中导出代码helper.js并将代码导入到index.js（我已经链接index.js到index.html）。
I did like that index.html
我确实喜欢那个 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">click</button>
<script src="./index.js"></script>
</body>
</html>
index.js
索引.js
import btn from './helper'
btn.addEventListener('click', function () {
window.alert('i am clicked')
})
and finally helper.js
最后helper.js
export let btn = document.getElementById('btn')
Then I run index.htmlfile in chrome browser.
然后我在 chrome 浏览器中运行index.html文件。
Chrome browser showing this message in the console.
Chrome 浏览器在控制台中显示此消息。
Uncaught SyntaxError: Cannot use import statement outside a module
未捕获的语法错误：无法在模块外使用导入语句
Please tell how can I solve that problem. I search on google and youtube, I did the same thing what they showed. As a result, the browser showing that massage.
请告诉我如何解决这个问题。我在 google 和 youtube 上搜索，我做了他们展示的同样的事情。结果，浏览器显示那个按摩。
回答by Guilherme Martin
You need to include you import inside a module:
您需要将 import 包含在模块中：
Try this:
试试这个：
<script type="module">
import btn from './helper'
</script>
Reference: ES Modules in Browsers
参考：浏览器中的 ES 模块
回答by Nick Sugar
You will need to serve your files with a web server on some port, say 5500. Then point your browser to that port i.e. localhost:5500/
您需要使用某个端口上的 Web 服务器来提供您的文件，例如 5500。然后将您的浏览器指向该端口，即 localhost:5500/
This will be the only way the browser will import other modules from another js file.
这将是浏览器从另一个 js 文件导入其他模块的唯一方式。
See... MDN Doc on Modules
请参阅...关于模块的 MDN 文档
- You can use the npm package http-server.
- Or the extension Live Server if you are using Visual Studio Code.
- Or any other server that you like that will work on your system.
- 您可以使用 npm 包 http-server。
- 或者，如果您使用的是 Visual Studio Code，则扩展 Live Server。
- 或者您喜欢的任何其他服务器都可以在您的系统上运行。
Next you will need to add type="module" to your script tag.
接下来，您需要将 type="module" 添加到您的脚本标记中。
<button id="btn">click</button>
<script type="module" src="./index.js"></script>
And your index.js try this...
你的 index.js 试试这个......
import { btn } from './helper.js'
Lastly your helper.js ....
最后你的 helper.js ....
const btn = document.getElementById('btn');
export { btn };
You might also think about using the .mjs extention on js files that are module. To let enyone know that it is indeed a module.
您可能还考虑在模块的 js 文件上使用 .mjs 扩展名。让大家知道它确实是一个模块。
