随着现代 Web 应用程序的日益增长，前端开发变得越来越复杂和多样化。JavaScript 的 ES6 标准为我们带来了许多新功能和语法，如模块化，箭头函数和解构赋值。然而，这些功能并未被所有浏览器兼容，这就需要使用 Babel 这样的工具将我们的代码转换为 ES5 标准的代码。
在使用 Babel 进行转换时，我们可能会遇到 SyntaxError: Unexpected token import 的错误。这个错误通常出现在我们使用 ES6 模块语法时，因为某些浏览器还不支持该语法。那么，我们该怎么办？
解决方案
解决该问题的方法是将 ES6 模块语法转换为 CommonJS 模块语法。Babel 提供了一组插件，我们只需要安装和配置相应的插件，就可以将我们的代码转换为 CommonJS 模块语法，从而避免出现 SyntaxError 的错误。
下面是使用 Babel 将 ES6 模块语法转换为 CommonJS 模块语法的步骤：
步骤 1：安装 Babel 和相应的插件
首先，我们需要安装 Babel 和以下插件：@babel/core、@babel/preset-env 和 @babel/plugin-transform-modules-commonjs。可以使用以下命令进行安装：
--- ------- ----------- ----------------- ---------------------------------------- ----------
步骤 2：在 Babel 配置文件中配置插件
创建一个名为 .babelrc 的文件，并在其中添加以下内容：
-
---------- -
-------------------
--
---------- -
------------------------------------------
-
-在这个文件中，"presets" 表示我们要使用哪个预设，这里选择了 @babel/preset-env，它可以根据我们的目标浏览器自动选择需要使用的插件和转换方式。
"plugins" 表示我们需要使用哪些插件来进行特定的转换。在这里，我们使用了 @babel/plugin-transform-modules-commonjs 这个插件来将 ES6 模块语法转换为 CommonJS 模块语法。
步骤 3：转换代码
配置好 Babel 后，我们需要使用 Babel 指定的命令来转换代码。我们可以在 package.json 文件中指定这个命令，例如：
---------- - -------- ------ --- -- ---- -
这个命令将 src 目录下的所有代码转换为 CommonJS 模块语法，并将转换后的代码保存到 lib 目录中。
示例代码
为了更好地理解上述步骤，我们来看一个示例代码：
------ - --- - ---- --------- ----- ------ - ------ --- --------------------
这段代码中，我们使用了 ES6 的模块语法导入了一个 math 模块，并调用了其中的 add 函数。如果直接运行该代码，就会出现 SyntaxError: Unexpected token import 的错误。
现在，我们按照上述步骤进行转换。最终的转换后代码如下：
---- -------- --- ----- - ------------------ --- ------ - --- ------------- --- --------------------
可以看到，转换后的代码使用了 CommonJS 的 require 函数导入了 math 模块，并用 var 来定义变量。在调用 add 函数时，使用了函数调用的语法来替代了符号调用的语法。
结论
在我们使用 Babel 进行转换时，可能会遇到 SyntaxError: Unexpected token import 的错误。这个错误通常出现在我们使用 ES6 模块语法时，因为某些浏览器还不支持该语法。为了解决这个问题，我们需要将 ES6 模块语法转换为 CommonJS 模块语法。通过安装和配置相应的插件，并使用 Babel 进行转换，我们可以避免出现 SyntaxError 的错误，并确保我们的代码能在尽可能多的浏览器中运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f4b4f2e7021665efcd94f