使用 Babel 遇到 SyntaxError: Unexpected token import 怎么办？

随着现代 Web 应用程序的日益增长，前端开发变得越来越复杂和多样化。JavaScript 的 ES6 标准为我们带来了许多新功能和语法，如模块化，箭头函数和解构赋值。然而，这些功能并未被所有浏览器兼容，这就需要使用 Babel 这样的工具将我们的代码转换为 ES5 标准的代码。

在使用 Babel 进行转换时，我们可能会遇到 SyntaxError: Unexpected token import 的错误。这个错误通常出现在我们使用 ES6 模块语法时，因为某些浏览器还不支持该语法。那么，我们该怎么办？

解决方案

解决该问题的方法是将 ES6 模块语法转换为 CommonJS 模块语法。Babel 提供了一组插件，我们只需要安装和配置相应的插件，就可以将我们的代码转换为 CommonJS 模块语法，从而避免出现 SyntaxError 的错误。

下面是使用 Babel 将 ES6 模块语法转换为 CommonJS 模块语法的步骤：

步骤 1：安装 Babel 和相应的插件

首先，我们需要安装 Babel 和以下插件：@babel/core、@babel/preset-env 和 @babel/plugin-transform-modules-commonjs。可以使用以下命令进行安装：

npm install @babel/core @babel/preset-env @babel/plugin-transform-modules-commonjs --save-dev

步骤 2：在 Babel 配置文件中配置插件

创建一个名为 .babelrc 的文件，并在其中添加以下内容：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}

在这个文件中，"presets" 表示我们要使用哪个预设，这里选择了 @babel/preset-env，它可以根据我们的目标浏览器自动选择需要使用的插件和转换方式。

"plugins" 表示我们需要使用哪些插件来进行特定的转换。在这里，我们使用了 @babel/plugin-transform-modules-commonjs 这个插件来将 ES6 模块语法转换为 CommonJS 模块语法。

步骤 3：转换代码

配置好 Babel 后，我们需要使用 Babel 指定的命令来转换代码。我们可以在 package.json 文件中指定这个命令，例如：

"scripts": {
  "build": "babel src -d lib"
}

这个命令将 src 目录下的所有代码转换为 CommonJS 模块语法，并将转换后的代码保存到 lib 目录中。

示例代码

为了更好地理解上述步骤，我们来看一个示例代码：

import { add } from './math';

const result = add(1, 2);

console.log(result);

这段代码中，我们使用了 ES6 的模块语法导入了一个 math 模块，并调用了其中的 add 函数。如果直接运行该代码，就会出现 SyntaxError: Unexpected token import 的错误。

现在，我们按照上述步骤进行转换。最终的转换后代码如下：

'use strict';

var _math = require('./math');

var result = (0, _math.add)(1, 2);

console.log(result);

可以看到，转换后的代码使用了 CommonJS 的 require 函数导入了 math 模块，并用 var 来定义变量。在调用 add 函数时，使用了函数调用的语法来替代了符号调用的语法。

结论

在我们使用 Babel 进行转换时，可能会遇到 SyntaxError: Unexpected token import 的错误。这个错误通常出现在我们使用 ES6 模块语法时，因为某些浏览器还不支持该语法。为了解决这个问题，我们需要将 ES6 模块语法转换为 CommonJS 模块语法。通过安装和配置相应的插件，并使用 Babel 进行转换，我们可以避免出现 SyntaxError 的错误，并确保我们的代码能在尽可能多的浏览器中运行。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f4b4f2e7021665efcd94f