在前端开发中，我们经常需要使用到 Babel 进行代码转换，以支持 ES6 语法。然而，有时候我们会遇到 Babel 报错 unexpected token 'import' 的问题，这是由于 Babel 默认仅支持 ES5 语法，而 import 是 ES6 中的语法，因此需要进行转换。本文将为大家介绍如何解决这个问题。
解决方法
方法一：使用 Babel 插件
Babel 提供了一个插件 @babel/plugin-transform-modules-commonjs，可以将 ES6 模块语法转换成 CommonJS 模块语法。安装插件的命令如下：
--- ------- ---------- ----------------------------------------
然后在 .babelrc 文件中添加插件配置：
- ---------- -------------------------------------------- -
方法二：使用 webpack 配置
如果你使用的是 webpack 打包工具，可以通过配置 webpack.config.js 文件来解决这个问题。在 module 配置中添加以下规则：
------- -
------ -
-
----- ----------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-这里使用了 babel-loader 和 @babel/preset-env，前者用于将 ES6 代码转换成 ES5 代码，后者用于根据目标浏览器或者 Node 版本等信息自动选择需要使用的插件和 polyfill。
方法三：使用 Rollup 打包工具
Rollup 是一个 JavaScript 模块打包器，专门用于打包 ES6 模块。使用 Rollup 打包工具，可以避免 Babel 转换 ES6 模块语法的问题。安装 Rollup 的命令如下：
--- ------- ---------- ------
然后新建一个 rollup.config.js 文件，配置如下：
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
----- ----------
--
-------- -
--------
-
--这里使用了 terser 插件，用于压缩代码。然后在 package.json 文件中添加以下命令：
-
---------- -
-------- ------- ---
-
-执行 npm run build 命令，即可生成打包后的代码。
示例代码
以下是一个使用 import 语法的示例代码：
------ - --- - ---- ------------ ------------------ ----
使用方法一或者方法二进行转换后，代码会变成如下形式：
--- ----- - --------------------- --------------- ------------- ----
使用方法三打包后的代码则是：
--------- -- -
---- --------
-------- ------ -- -
------ - - --
-
------------------ ----
-----总结
本文介绍了三种解决 Babel 报错 unexpected token 'import' 的方法。使用 Babel 插件或者 webpack 配置都可以解决这个问题，但是需要注意配置的正确性。使用 Rollup 打包工具则避免了这个问题，但是需要注意 Rollup 的使用方法。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c7c474add4f0e0ff1b8cdc