随着 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 代码时，添加这个插件即可。
--- ------- ---------- ----------------------------------------------
- ---------- ---------------------- ---------- ------------------------------------- -
方法二：使用 babel-plugin-transform-runtime 和 babel-runtime
babel-plugin-transform-runtime 是 Babel 的一个插件，它可以在转换 ES6 代码时，自动引入 babel-runtime 库。babel-runtime 是一个包含 ES6 的 polyfill 和运行时库的库，它可以解决一些常见的 ES6 兼容性问题。我们只需要在使用 Babel 编译 ES6 代码时，添加这两个插件即可。
--- ------- ---------- ------------------------------ -------------
-
---------- ----------------------
---------- -
--------------------- -
----------- ------
-------------- ----
--
-
-示例代码
-- -------- ------ - --- - ---- -------- ------
-- ------ ------ -------- ----- - ------------------- --------- -
使用方法一：
-- -------- - ---------- ---------------------- ---------- ------------------------------------- -
-- -------- ------ -------- -- ------ ---- -------- --- ---- - ----------------- --- ------------
使用方法二：
-- --------
-
---------- ----------------------
---------- -
--------------------- -
----------- ------
-------------- ----
--
-
--- -------- ------ -------- -- ------ ---- -------- --- ---- - ----------------- --- ------------
总结
在使用 Babel 编译 ES6 代码时，遇到 "Unexpected token import" 的问题，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 或 babel-plugin-transform-runtime 和 babel-runtime 来解决这个问题。当然，这只是解决问题的方法之一，我们还可以使用其他的插件来解决这个问题。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660bc481d10417a222bfcc3c