语法错误：JavaScript 中的意外令牌“导出”[已修复]

作者

目录

SyntaxError: Unexpected token ‘export’ in JavaScript

  1. Node.JS 中未捕获的语法错误意外令牌“导出”
  2. 浏览器中未捕获的 SyntaxError 意外令牌“导出”

SyntaxError: JavaScript 中的意外标记“导出”

“Uncaught SyntaxError Unexpected token ‘export’”的发生有两个主要原因：

  1. 在 Node.js 应用程序中使用 ES6 模块语法而不type使用
    modulein package.json.
  2. 在脚本中使用 ES6 模块语法而不在脚本标签中设置typeto 。module

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

如果您在浏览器环境中遇到错误，请向下滚动到下一个副标题。

Uncaught SyntaxError Unexpected token ‘export’ in Node.JS

下面是一个错误如何在 Node.js 应用程序中发生的示例。

索引.js
// ⛔️ Uncaught SyntaxError: Unexpected token 'export'
export class Person {
  constructor(first) {
    this.first = first;
  }
}

在你的文件中设置type属性modulepackage.json

要解决该错误，请在您的文件中将type属性设置为
。modulepackage.json

当最近的字段设置为 .时，以扩展名结尾的文件.js将作为 ES6 模块加载
。package.jsontypemodule

如果没有package.json文件，可以使用
npm init -y命令创建一个。

在项目的根目录中打开终端并运行以下命令。

壳
npm init -y

现在在文件中设置type属性：modulepackage.json

包.json
{
  "type": "module",
  // ... rest
}

现在您可以

在 Node.js 应用程序中使用ES6 模块导入/导出语法。

这是一个名为的文件index.js，它有 2 个命名的导出。

索引.js
// 👇️ named export
export class Person {
  constructor(first) {
    this.first = first;
  }
}

// 👇️ named export
export const site = 'bobbyhadz.com';

下面是我们如何将类和变量导入一个名为
another-file.js.

另一个文件.js
import {Person, site} from './index.js';

const p1 = new Person('James');
console.log(p1); // 👉️ Person { first: 'James' }

console.log(site); // 👉️ bobbyhadz.com

确保在导入语句中指定文件的扩展名。

在项目文件中将type属性设置为允许您在 Node.js 应用程序中使用 ES6 模块。module package.json

改用旧的 CommonJS 语法

如果您不想在您的 中将该type属性设置为，您可以使用旧的 CommonJS 语法。modulepackage.json

您还可以通过重构代码以使用 CommonJS 语法来解决错误，例如，module.exports = {num};而不是export num = 10;.

索引.js
class Person {
  constructor(first) {
    this.first = first;
  }
}

// ✅ Using module.exports instead of export
module.exports = {
  Person,
};

然后我们可以使用导入其他文件的成员require()。

另一个文件.js
const {Person} = require('./index.js');

确保你没有在你的文件中
设置type属性，并且你没有扩展名的文件可以使用语法。modulepackage.json.mjsrequire()

发生错误是因为我们还不允许在 Node.js 中使用 ES6 模块导入/导出语法。

有多种解决方法，例如使用 babel 将我们的 ES6 代码转换为旧版本的 JavaScript，或者简单地将我们的代码重构为 CommonJS 语法。

Uncaught SyntaxError Unexpected token ‘export’ 在浏览器中

要解决该错误，请将type您的<script />标签设置为module。

所有现代浏览器都支持该type="module"属性，并允许我们使用 ES6 模块语法。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>

    <!-- ✅ type is set to `module` ✅ -->
    <script type="module" src="index.js"></script>
  </body>
</html>

设置type为module使我们能够在文件中使用 ES6 模块语法
index.js。

索引.js
// 👇️ named export
export class Person {
  constructor(first) {
    this.first = first;
  }
}

// 👇️ named export
export const site = 'bobbyhadz.com';
只要在加载脚本时将属性设置type为module ，就可以使用 ES6 模块语法。

然后，您可以通过以下方式导入导出。

另一个文件.js
// 👇️ named imports
import {Person, site} from './index.js';

console.log(Person); // 👉️ [class Person]

console.log(site); // 👉️ "bobbyhadz.com"

请注意，您必须将type属性设置module为所有使用 ES 模块语法的脚本。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- ✅ type is set to `module` on both scripts ✅ -->
    <script type="module" src="index.js"></script>
    <script type="module" src="another-file.js"></script>
  </body>
</html>
所有现代浏览器都支持该type="module"属性。

使用named导出和导入

下面是一些使用 ES6 模块语法和named导出
的示例default。

这是一个名为的文件index.js，它有 3 个命名的导出。

索引.js
// 👇️ named exports
export class Person {}
export class Animal {}

export const site = 'bobbyhadz.com'

现在我们可以将导出导入到一个名为another-file.js.

另一个文件.js
// 👇️ named imports
import {Person, Animal, site} from './index.js';

console.log(site); // 👉️ bobbyhadz.com

这是一个使用导出的文件示例default。

索引.js
// 👇️ default export
export default class Person {}
每个文件最多可以导出 1 个，但是，您可以根据需要导出任意default数量的文件。named

使用default导出和导入

这是我们将如何导入导出default。

另一个文件.js
// 👇️ default import
import Person from './index.js'

请注意，我们不对default导入使用花括号。

同时使用命名的和默认的导出和导入

您也可以混合搭配。index.js这是一个使用默认和命名导出的文件。

索引.js
// 👇️ default export
export default class Person {}

// 👇️ named export
export const age = 30;

这是我们如何将类和变量导入到another-file.js.

另一个文件.js
// 👇️ default and named imports
import Person, {age} from './index.js'

注意事项：

  • 确保在导入语句中指定文件的扩展名。
  • 每个文件最多可以导出 1 个，但可以根据需要导出任意default多个。named

# 结论

要解决“SyntaxError: Unexpected token ‘export’”错误，请确保：

  • 在 Node.js 的文件中设置为type。modulepackage.json
  • 在浏览器中设置您的 JS 脚本type标签。module