在使用 Babel 编译 ES6 模块时，有时会出现 “unexpected token import” 错误，这是因为 Babel 在编译过程中无法处理 ES6 的模块语法。这个问题的解决方法主要有两种，下面简单介绍一下。
解决方法一：使用 Babel 编译器
Babel 是一个 JavaScript 编译器，它可以将 ES6 或者更新版本的 JavaScript 代码转换为浏览器可以识别和运行的 JavaScript 代码。如果想要在项目中使用 ES6 的模块语法，我们可以使用 Babel 编译器来转换代码。
首先，我们需要安装 Babel 编译器。可以通过 npm 安装：
--- ------- ---------- ----------- ---------- -----------------
然后，配置 .babelrc 文件，指定使用 @babel/preset-env 这个预设进行编译：
- ---------- --------------------- -
最后，命令行执行 Babel 编译：
--- ----- --- --------- ---
这样，我们的 ES6 模块语法就可以被 Babel 编译器正确地转换成浏览器可以识别的代码了。
解决方法二：使用 Webpack 打包器
如果我们使用了 Webpack 打包器，也可以通过 Webpack 的 babel-loader 模块来处理 ES6 的模块语法。
首先，安装 babel-loader:
--- ------- ---------- ------------ ----------- -----------------
然后，配置 Webpack 的 module.rules：
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-这样，Webpack 就可以正确地处理我们的 ES6 模块语法了。
示例代码
下面是一段使用 ES6 的模块语法并通过 Babel 编译的示例代码：
-- -- ------- -- ------ - --- - ---- ------------ -- ------- ----- - - -- ----- - - -- ------------------ ----
math.js 模块中的代码：
-- -- --- -- ------ -------- ------ -- - ------ - - -- -
通过 Babel 编译后的代码：
---- -------- --- ----- - --------------------- -- ------- --- - - -- --- - - -- --------------- ------------- ----
总结
本文介绍了在使用 Babel 编译 ES6 模块时出现 “unexpected token import” 错误的解决方法，分别是使用 Babel 编译器和使用 Webpack 打包器。在实际开发中，我们可以根据具体的项目情况选择合适的解决方法，让我们的代码更加规范和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6656de26d3423812e4bddab6