Javascript 获得意外的令牌导出

Getting Unexpected Token Export

提问by Jason

I am trying to run some ES6 code in my project but I am getting an unexpected token export error.

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

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

回答by Phil Ricketts

You are using ES6 Module syntax.

您正在使用 ES6 模块语法。

This means your environment (e.g. node.js) must support ES6 Module syntax.

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

NodeJS uses CommonJS Module syntax (module.exports) not ES6 module syntax (exportkeyword).

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

Solution:

解决方案：

• Use babelnpm package to transpile your ES6 to a commonjstarget

• 使用babelnpm 包将 ES6 转换为commonjs目标

or

或者

• Refactor with CommonJS syntax.

• 使用 CommonJS 语法重构。

Examples of CommonJS syntax are (from flaviocopes.com/commonjs/):

CommonJS 语法的示例是（来自flaviocopes.com/commonjs/）：

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

回答by Wilt

In case you get this error it might also be related to how you included the javascript file into your html page. When loading modules you have to explicitly declare those files as such. Here an example:

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

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

var bar = "bar";

export { foo, bar };

When you include the script like this:

当您包含这样的脚本时：

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

You will get the error:

你会得到错误：

Uncaught SyntaxError: Unexpected token export

未捕获的语法错误：意外的令牌导出

You need to include the file with a type attribute set to "module":

您需要包含类型属性设置为“模块”的文件：

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

And then it will work as expected and you are ready to import your module in another module:

然后它将按预期工作，您准备将模块导入另一个模块：

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

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

回答by Barnstokkr

My two cents

我的两分钱

Export

出口

ES6

ES6

myClass.js

我的类.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

其他.js

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

CommonJS Alternative

CommonJS 替代品

myClass.js

我的类.js

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

other.js

其他.js

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

Export Default

导出默认值

ES6

ES6

myClass.js

我的类.js

export default class MyClass {
}

other.js

其他.js

import MyClass from './myClass';

CommonJS Alternative

CommonJS 替代品

myClass.js

我的类.js

module.exports = class MyClass1 {
}

other.js

其他.js

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

Hope this helps

希望这可以帮助

回答by Jalal

To use ES6 add babel-preset-env

要使用 ES6 添加 babel-preset-env

and in your .babelrc:

并在您的.babelrc：

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

Answer updated thanks to @ghanbari comment to apply babel 7.

感谢@ghanbari 评论应用 babel 7 更新了答案。

回答by Alvin Konda

There is no need to use Babel at this moment (JS has become very powerful) when you can simply use the default JavaScript module exports. Check full tutorial

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

Message.js

消息.js

module.exports = 'Hello world';

app.js

应用程序.js

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

console.log(msg); // Hello World

回答by Alex Cory

I fixed this by making an entry point file like.

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

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

and any file I imported inside app.jsand beyond worked with imports/exportsnow you just run it like node index.js

以及我在内部app.js和外部导入的任何文件，imports/exports现在您只需像运行一样运行它node index.js

Note: if app.jsuses export default, this becomes require('./app.js').defaultwhen using the entry point file.

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

回答by YouBee

Install the babel packages @babel/coreand @babel/presetwhich will convert ES6 to a commonjs target as node js doesn't understand ES6 targets directly

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

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

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

Then you need to create one configuration file with name .babelrcin your project's root directory and add this code there

然后你需要.babelrc在你的项目的根目录中创建一个同名的配置文件，并在那里添加这段代码

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

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

回答by purushottam banerjee

Using ES6 syntax does not work in node, unfortunately, you have to have babel apparently to make the compiler understand syntax such as export or import.

使用 ES6 语法在 node 中不起作用，不幸的是，显然你必须有 babel 才能让编译器理解诸如导出或导入之类的语法。

npm install babel-cli --save

Now we need to create a .babelrc file, in the babelrc file, we'll set babel to use the es2015 preset we installed as its preset when compiling to ES5.

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

At the root of our app, we'll create a .babelrc file. $ npm install babel-preset-es2015 --save

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

At the root of our app, we'll create a .babelrc file.

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

{  "presets": ["es2015"] }

Hope it works ... :)

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