在前端开发中，Webpack 已成为主流的打包工具。然而，Webpack 默认只支持将 CommonJS、AMD 模块转换为浏览器能够执行的代码，对于 ES6 模块的支持需要借助 Babel 进行转换。但是，在使用 Webpack 构建项目时，有时会遇到 “unexpected token import” 的错误，这是因为 Webpack 默认不能识别 ES6 模块的导入语句“import”。
本文将详细介绍如何使用 Babel-loader 解决这个问题，并附带示例代码进行演示。
为什么会出现“unexpected token import”错误？
首先我们需要了解一下 ES6 模块导入的使用场景。ES6 引入了模块化的概念，通过“import”，“export”等关键字实现模块的导入和导出。这样可以让代码更加清晰和可维护，同时也方便了模块的复用和分离。
然而，在浏览器中执行 ES6 模块的代码时会出现问题，因为它不能被直接识别和执行。这就需要将 ES6 模块转换为能够被浏览器识别和执行的代码格式。
在使用 Webpack 构建项目时，Webpack 默认只支持 CommonJS、AMD 模块的解析，对于 ES6 模块的解析需要借助 Babel 进行转换。而在配置 Babel 后，如果没有正确地配置 Webpack，那么在加载包含 ES6 模块导入语句的文件时会出现“unexpected token import”错误。这是因为 Webpack 默认不能识别 ES6 模块的导入语句，导致无法正常解析文件内容。
Babel-loader 的作用
Babel-loader 是 Webpack 的一个 loader，主要作用是将 JavaScript 代码中的 ES6 语法转换为目标浏览器能够识别和执行的 JavaScript 代码。使用 Babel-loader 可以解决“unexpected token import”错误。
如何配置 Babel-loader 解决“unexpected token import”错误？
在 Webpack 中配置 Babel-loader，需要添加两个依赖：babel-loader 和 @babel/core（Babel 核心库）。
首先，在项目根目录下执行以下命令安装依赖：
--- ------- ------------ ----------- ----------
安装完成后，在 Webpack 配置文件中添加以下配置：
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-解释一下以上代码的含义：
test: /\.js$/：表示匹配所有以“.js”结尾的文件。exclude: /node_modules/：表示不匹配 node_modules 目录下的文件。loader: 'babel-loader'：表示使用 Babel-loader 进行代码转换。options: { presets: ['@babel/preset-env'] }：表示使用 @babel/preset-env 预设对代码进行转换。
示例代码
假设有两个文件（app.js 和 module.js），其中 app.js 通过“import”关键字导入了 module.js 文件的默认导出：
-- --------- ------ ------- -------- -- - ------------------ -------- -
-- ------ ------ ---- ---- -------------- -------
在执行 Webpack 构建时，会出现 “unexpected token import” 错误，因为 Webpack 无法识别 ES6 模块导入语句“import”。添加 Babel-loader 后，需要重新执行构建命令：
--- --- -----
构建过程中，Babel-loader 将 ES6 语法转换为目标浏览器能够执行的代码格式，并解决了“unexpected token import”错误。最终运行效果是在控制台输出了“Hello World”。
结论
使用 Babel-loader 可以让 Webpack 解析 ES6 模块导入语句，并将其转换为目标浏览器能够执行的代码格式，从而避免了“unexpected token import”错误的出现。在配置过程中需要注意 Babel-loader 和 @babel/core 的安装以及 Webpack 的配置。
本文所涉及的示例代码可以在该 GitHub 仓库中找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6722c8ca2e7021665e0ceffb