获得意外的令牌导出

Question

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

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

Answer 1

您正在使用ES6模块语法.

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

NodeJS使用CommonJS Module语法(module.exports)而不是ES6模块语法(export关键字).

解:

• 使用babelnpm包将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

我的类.js

export class MyClass1 {
}
export class MyClass2 {
}

其他.js

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

CommonJS 替代品

我的类.js

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

其他.js

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

导出默认值

ES6

我的类.js

export default class MyClass {
}

其他.js

import MyClass from './myClass';

CommonJS 替代品

我的类.js

module.exports = class MyClass1 {
}

其他.js

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

希望这可以帮助

Answer 4

我通过制作一个入口点文件来解决这个问题。

// 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 5

现在不需要使用 Babel（JS 变得非常强大），只需使用默认的 JavaScript 模块导出即可。查看完整教程

消息.js

module.exports = 'Hello world';

应用程序.js

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

console.log(msg); // Hello World

Answer 6

要使用ES6添加 babel-preset-env

在你的.babelrc:

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

Answer 7

安装 babel 包@babel/core，@babel/preset这会将 ES6 转换为 commonjs 目标，因为 node js 不直接理解 ES6 目标

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

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

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