Babel 编译报错：Unexpected token import 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会用到 ES6 的模块化语法 import/export，然而在使用 Babel 编译时，有时候会出现 Unexpected token import 的错误，这是因为 Babel 默认只能编译 ES6 的语法，而对于模块化语法需要借助插件来进行编译。本文将介绍如何解决这个问题，以及如何配置 Babel 插件来支持模块化语法的编译。

解决方法

在解决这个问题之前，我们需要先了解一下 Babel 的编译流程。Babel 的编译流程可以分为三个阶段：解析、转换、生成。其中，解析阶段将源代码转换为抽象语法树（AST），转换阶段对 AST 进行修改，生成阶段将修改后的 AST 转换为代码。因此，要解决 Unexpected token import 的问题，我们需要在转换阶段对模块化语法进行修改。

在 Babel 中，可以通过安装插件来扩展其功能。对于模块化语法，我们可以安装 @babel/plugin-transform-modules-commonjs 插件来将 import/export 转换为 require/module.exports。具体步骤如下：

安装 @babel/plugin-transform-modules-commonjs 插件：

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

在 .babelrc 文件中添加插件配置：
```
{
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}
```
如果你没有 .babelrc 文件，可以在项目根目录下创建一个空文件，然后添加上面的配置即可。
重新编译代码：
```
npx babel src --out-dir lib
```
这里假设你的源代码在 src 目录下，编译后的代码输出到 lib 目录下。

这样，就可以顺利地编译模块化语法了。

示例代码

下面是一个简单的示例代码，其中使用了 import/export 语法：

// javascriptcn.com 代码示例
// src/index.js
import { add } from './math';

console.log(add(1, 2));

// src/math.js
export function add(a, b) {
  return a + b;
}

在没有安装 @babel/plugin-transform-modules-commonjs 插件时，使用 Babel 编译会出现以下错误：

SyntaxError: Unexpected token import

安装插件后，再次使用 Babel 编译，就可以顺利地将代码转换为 CommonJS 的格式：

// javascriptcn.com 代码示例
// lib/index.js
'use strict';

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

console.log((0, _math.add)(1, 2));

// lib/math.js
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.add = add;

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

总结

在使用 Babel 编译时，如果出现 Unexpected token import 的错误，可以通过安装 @babel/plugin-transform-modules-commonjs 插件来解决。同时，我们也可以通过插件来扩展 Babel 的功能，从而支持更多的语法特性。希望本文能对大家有所帮助。

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