javascript 导入时“未捕获的语法错误：意外的标记 {”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50938262/
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
"Uncaught SyntaxError: Unexpected token {" while importing
提问by Hyrial
I am trying to import a function from another javascript file but an error occurs with the import statement in main.js.
我正在尝试从另一个 javascript 文件中导入一个函数，但是main.js.
main.js:
main.js：
import {Event} from 'event.js';
let asdf = new Event("hi", "hi", "hi");
console.log(asdf.title);
console.log(asdf.mainText);
console.log(asdf.buttonSet);
event.js:
event.js：
export function Event(title, mainText, buttonSet) {
this.title = title;
this.mainText = mainText;
this.buttonSet = buttonSet;
}
I looked up the syntax and don't see anything wrong:
我查了一下语法，没有发现任何错误：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Also, I ran the code snippet in this link and got the same error. ES6 in the browser: Uncaught SyntaxError: Unexpected token import
另外，我运行了此链接中的代码片段并得到了相同的错误。 浏览器中的 ES6：Uncaught SyntaxError: Unexpected token import
Edit:Corrected index.html file:
编辑：更正 index.html 文件：
<script src="scripts/main.js" type="module"></script>
回答by Jaromanda X
Based on the error message
根据错误信息
- you're running Chrome,
- you haven't set
type="module"in the script tag
- 你正在运行 Chrome，
- 你还没有
type="module"在脚本标签中设置
I'm trying to find some good documentation regarding module type for script tag, however this is the best I can find so far
我试图找到一些关于脚本标签的模块类型的好文档，但这是迄今为止我能找到的最好的
So, if your script tag is
所以，如果你的脚本标签是
<script type="application/javascript">
import {Event} from "event.js";
......
</script>
or even if it is the following (because type is optional)
或者即使是以下（因为类型是可选的）
<script>
import {Event} from "event.js";
......
</script>
change it to
将其更改为
<script type="module">
import {Event} from "event.js";
......
</script>
回答by wizebin
Your syntax is fine if you're using a transpiler, specifically babel is the transpiler most people use these days.
如果您使用的是转译器，那么您的语法就很好，特别是 babel 是当今大多数人使用的转译器。
You can specifically enable some es6 functionality (including import and export) in modern browsers using the "module" type in your script <script type=module src="main.js" />but if you're running locally cross origin request stuff will not cooperate, so you can host your code locally using a web server like express.js
您可以使用脚本中的“模块”类型在现代浏览器中专门启用某些 es6 功能（包括导入和导出），<script type=module src="main.js" />但如果您在本地运行跨源请求，则不会合作，因此您可以使用 Web 在本地托管您的代码服务器喜欢express.js
There are many many tutorials available online giving you a rundown on how to begin with web development in the modern age, but here's a list of topics you can research yourself.
网上有很多教程可以让您简要了解如何在现代开始进行 Web 开发，但这里列出了您可以自己研究的主题列表。
node.jsThis is for javascript executionexpress.jsThis is for creating servers usingnode.jses6This is a specification, a newer "version" of ecmascript (javascript), it has new features like import and export and object destructuringbabelThis is a transpiler, something that converts new code (such as es6) into code that can run on older systems (such as es5)webpackThis is a javascript packaging system, used to combine code and execute modules like transpilers
node.js这是用于 javascript 执行express.js这是用于创建服务器使用node.jses6这是一个规范，是 ecmascript (javascript) 的新“版本”，它具有导入和导出和对象解构等新功能babel这是一个转译器，可以将新代码（例如 es6）转换为可以在旧系统（例如 es5）上运行的代码webpack这是一个 javascript 打包系统，用于组合代码和执行模块，如转译器
There's a lot to learn, and one of the best places that we as a community can improve. To avoid all of the messy startup stuff you can try a project like https://codesandbox.io/which aims to make this whole process much easier.
有很多东西需要学习，这是我们作为一个社区可以改进的最好的地方之一。为了避免所有混乱的启动内容，您可以尝试一个像https://codesandbox.io/这样的项目，该项目旨在使整个过程变得更加容易。
回答by Sidy Mbengue
In your export
在您的出口
Export default function Event(title,mainText,buttonSet){
this.title=title;
this.mainText=mainText,
this.buttonSet=buttonSet;
}
And in your import
并在您的进口
import Event from "event.js";
