Babel 编译 ES6 时出现的 Unexpected token import 错误解决方法

在使用 Babel 编译 ES6 代码时，有时会遇到 Unexpected token import 的错误。这是因为 import 是 ES6 中的模块语法，Babel 默认情况下不支持转换。本文将介绍在项目中解决这个问题的方法。

什么是 Babel？

Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在前端开发中，我们通常使用 Babel 将 ES6 代码编译成浏览器支持的 ES5 代码。Babel 还支持许多插件，可以扩展它的功能，例如转换 JSX、转换 TypeScript 等。

解决 Unexpected token import 错误的方法

通常，我们可以通过安装 @babel/plugin-transform-modules-commonjs 插件来解决 import 语句的问题。

首先，安装插件：

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

接着，在 .babelrc 文件或 babel.config.js 文件中配置插件：

{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}

这样，在 Babel 编译时，import 语句就会被转换成 CommonJS 的 require 语句。例如，下面的 ES6 代码：

import {add} from './math';
const result = add(1, 2);
console.log(result);

经过 Babel 编译后，会变成：

var _math = require('./math');
var result = (0, _math.add)(1, 2);
console.log(result);

这样，我们就可以顺利编译 ES6 代码了。

示例代码

为了更好地理解这个问题，我们来看一个示例。假设我们有以下两个文件：

src/math.js

export function add(a, b) {
  return a + b;
}

src/index.js

import {add} from './math';
const result = add(1, 2);
console.log(result);

如果我们直接使用 Babel 进行编译，会得到下面的错误：

SyntaxError: Unexpected token import

这是因为 Babel 不支持 import 语句的默认处理方式。我们需要按照上面的方法，在项目中配置插件来解决这个问题。请参考上面的方法，安装 @babel/plugin-transform-modules-commonjs 插件，并在 .babelrc 文件或 babel.config.js 文件中配置插件，然后再次进行编译。

现在，我们重新运行 Babel 进行编译，就不会再输出错误信息了。实际上，这时候的编译结果就是我们想要的 JavaScript 代码。

这里提供一个完整的配置示例，供参考：

.babelrc

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

上面的配置中，@babel/preset-env 是识别和转换最新的 JavaScript 语法的主要转换器。@babel/plugin-transform-modules-commonjs 插件解决了 import 语句的问题，将其转换为 CommonJS 的 require 语句。

总结

Babel 是前端开发中一个重要的工具，可以将 ES6 代码编译成浏览器支持的 ES5 代码，以便更好地兼容各种不同的浏览器。在这个过程中，我们可能会遇到某些语法错误，例如 Unexpected token import。本文介绍了解决这个问题的方法，可以给开发者提供一些指导。

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