获得意外的令牌导出

Question

我试图在我的项目中运行一些ES6代码，但我收到意外的令牌导出错误。

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

Answer 1

您正在使用ES6模块语法。

这意味着您的环境（例如node.js）必须支持ES6模块语法。

NodeJS使用CommonJS模块语法（module.exports）而不是ES6模块语法（export关键字）。

解：

• 使用babel npm包将您的ES6转换为commonjs目标

要么

• 使用CommonJS语法重构。

Answer 2

如果您收到此错误，也可能与您将javascript文件包含在html页面中的方式有​​关。加载模块时，您必须明确声明这些文件。这是一个例子：

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

当您包含这样的脚本时：

<script src="module.js"></script>

你会收到错误：

未捕获的SyntaxError：意外的令牌导出

您需要包含type属性设置为“module”的文件：

<script type="module" src="module.js"></script>

然后它将按预期工作，您可以在另一个模块中导入模块：

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

Answer 3

要使用ES6，请添加babel-preset-env

在你的.babelrc：

{
  "presets": ["@babel/preset-env"]
}

回答更新，感谢@ghanbari评论申请babel 7。

Answer 4

安装babel软件包@babel/core和@babel/preset，它将ES6转换为commonjs目标，因为节点js不能直接理解ES6目标。

npm install --save-dev @babel/core @babel/preset-env

然后，您需要在项目的根目录中创建一个名为.babelrc的配置文件，并在此处添加此代码

{ 
    "presets": ["@babel/preset-env"] 
}

Answer 5

使用ES6语法在节点中不起作用，遗憾的是，你必须让babel明白让编译器理解语法，例如export或import。

npm install babel-cli --save

现在我们需要创建一个.babelrc文件，在babelrc文件中，我们将设置babel使用我们在编译为ES5时安装的es2015预设。

在我们的应用程序的根目录，我们将创建一个.babelrc文件。 $ npm install babel-preset-es2015 --save

在我们的应用程序的根目录，我们将创建一个.babelrc文件。

{  "presets": ["es2015"] }

希望它有效...... :)