使用 Babel 编译 ES6，遇到 "Unexpected token import" 问题的解决方法-JavaScript中文网-JavaScript教程资源分享门户

随着 ES6 的推广，越来越多的前端开发者开始使用 ES6 编写代码。然而，由于部分浏览器不支持 ES6，开发者需要使用 Babel 将 ES6 代码转换为 ES5 代码。但是，在使用 Babel 编译 ES6 代码时，有时会遇到 "Unexpected token import" 的问题，本文将介绍这个问题的原因以及解决方法。

问题原因

在 ES6 中，我们可以使用 import 语句来引入模块。但是，由于部分浏览器不支持 import 语句，因此在使用 Babel 将 ES6 代码转换为 ES5 代码时，Babel 会将 import 语句转换为 CommonJS 的 require 语句。然而，在某些情况下，Babel 无法正确地转换 import 语句，从而导致 "Unexpected token import" 的问题。

解决方法

要解决 "Unexpected token import" 的问题，我们需要使用 Babel 的插件来正确地转换 import 语句。下面，我们将介绍两种常用的解决方法。

方法一：使用 babel-plugin-transform-es2015-modules-commonjs

babel-plugin-transform-es2015-modules-commonjs 是 Babel 的一个插件，它可以将 ES6 模块语法转换为 CommonJS 模块语法。我们只需要在使用 Babel 编译 ES6 代码时，添加这个插件即可。

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

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

方法二：使用 babel-plugin-transform-runtime 和 babel-runtime

babel-plugin-transform-runtime 是 Babel 的一个插件，它可以在转换 ES6 代码时，自动引入 babel-runtime 库。babel-runtime 是一个包含 ES6 的 polyfill 和运行时库的库，它可以解决一些常见的 ES6 兼容性问题。我们只需要在使用 Babel 编译 ES6 代码时，添加这两个插件即可。

npm install --save-dev babel-plugin-transform-runtime babel-runtime

-- -------------------- ---- -------
-
  ---------- ----------------------
  ---------- -
    --------------------- -
      ----------- ------
      -------------- ----
    --
  -
-

示例代码

// index.js
import { foo } from './foo';

foo();

// foo.js
export function foo() {
  console.log('Hello, world!');
}

使用方法一：

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

// index.js (after compiled by Babel)
'use strict';

var _foo = require('./foo');

(0, _foo.foo)();

使用方法二：

-- -------------------- ---- -------
-- --------
-
  ---------- ----------------------
  ---------- -
    --------------------- -
      ----------- ------
      -------------- ----
    --
  -
-

// index.js (after compiled by Babel)
'use strict';

var _foo = require('./foo');

(0, _foo.foo)();

总结

在使用 Babel 编译 ES6 代码时，遇到 "Unexpected token import" 的问题，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 或 babel-plugin-transform-runtime 和 babel-runtime 来解决这个问题。当然，这只是解决问题的方法之一，我们还可以使用其他的插件来解决这个问题。希望本文对大家有所帮助。

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