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

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS替代

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

默认导出

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS替代

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

希望这会有所帮助

Answer 4

要使用ES6，请添加(not verified)

和您的babel-preset-env：

.babelrc

Answer 5

我通过制作像这样的入口点文件来解决此问题。

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

以及我在app.js内以及以后导入的任何文件都与imports/exports 现在您可以像node index.js

一样运行它

注意：如果app.js使用export default，则在使用入口点文件时将变成require('./app.js').default。

Answer 6

此时，您只需使用默认的JavaScript模块导出，就无需使用Babel（JS变得非常强大）。 Check full tutorial

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Answer 7

当我尝试在项目中导入本地javascript模块时，也出现了意外的令牌导出错误。我在index.html文件中添加脚本标签时通过将类型声明为模块来解决了该问题。

<script src = "./path/to/the/module/" type = "module"></script>

Answer 8

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

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

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

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

Answer 9

我实际上想添加简单的解决方案。使用 const 和反引号 (`)。

const model = `<script type="module" src="/"></<script>`

Answer 10

使用ES6语法在节点中不起作用，不幸的是，您显然必须要通俗易懂，才能使编译器理解诸如导出或导入之类的语法。

npm install babel-cli --save

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

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

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

{  "presets": ["es2015"] }

希望它能起作用...：）

获得意外的令牌导出

10 个答案:

导出

默认导出