在进行前端项目开发的过程中，我们常常需要使用 Mocha 进行单元测试。在测试过程中，我们有时候会遇到报错信息“Unexpected token import”，这是因为 Mocha 在默认情况下无法识别 ES6 的 import 语法所导致的。
那么该如何解决这个问题呢？以下是具体的解决方法：
使用 Babel
使用 Babel 是解决 “Unexpected token import” 错误的最常用方法。Babel 是一个非常流行的 JavaScript 编译工具，它可以将现代 JavaScript 语法转换为可在大多数浏览器上运行的旧的 ES5 语法。通过在测试文件中安装并配置 Babel，就可以解决上面的问题了。
安装 Babel
我们可以使用 npm 进行 Babel 安装，只需要在项目根目录下进行以下命令：
--- ------- ---------- ----------- ----------------- -----
其中，@babel/cli 是 Babel 的命令行接口，@babel/core 是核心模块，@babel/preset-env 是用来指定需要转换哪些新语法的预设模块，mocha 是测试框架。
配置 Babel
在项目根目录下创建一个 .babelrc 文件，用来配置 Babel。我们需要添加以下代码：
- ---------- --------------------- -
这里的 @babel/preset-env 模块将自动根据项目中所使用的 ECMAScript 特性进行转换。
测试文件的配置
在测试文件中，我们需要为 Mocha 配置启动脚本。在项目指定目录下创建一个 test/ 文件夹，并在该文件夹下创建一个文件 mocha.opts ，在其中添加以下配置：
--------- ---------------
此时，Mocha 将会在测试前，先读入所有测试脚本，然后在执行这些脚本前用 Babel 进行转换。
使用 webpack
另一个解决 “Unexpected token import” 错误的方法是使用 webpack。Webpack 是一个将 JavaScript 编译成浏览器可以使用的东西的工具，它可以解析 ES6 语法，包括 import 和 export。
安装 webpack
使用 npm 进行 webpack 安装，只需要在项目根目录下进行以下命令：
--- ------- ------- ----------- ------------------ ----- ----
其中，webpack 和 webpack-cli 是 Webpack 的核心模块，webpack-dev-server 是用于本地调试的服务器，mocha 和 chai 是测试框架。
配置 webpack
在项目指定目录下创建一个 webpack.config.js 文件，用来配置 webpack。我们需要添加以下代码：
-------------- - -
----- --------------
------ -----------------------
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
-
-这里我们使用 babel-loader 来翻译我们的 JavaScript 文件。
测试文件的配置
在测试文件中，我们需要编写 index.js 文件，并运行 webpack 打包：
------ ------ ---- --------
------ ---- ---- -----------
---------------- -- -- -
---------- ------ ---- -- ----- ------ --- -- -- -
--------------------- -----
--
---------- ------ ----- -- ----- ---- --- ----- --- -- -- -
--------------------- ------
--
--然后在命令行中运行 webpack 命令：“npx webpack”，此时 webpack 将会在 test/unit 目录下生成一个 bundle.js 文件。接下来，在命令行输入“mocha test/unit/bundle.js”，即可运行我们的测试用例。
结论
总之，在使用 Mocha 进行测试时，我们需要使用 ES6 的语法。但是，Mocha 默认是不能够识别 ES6 的模块化语法的。因此，我们需要使用 Babel 或者 webpack 来解决这个问题。以上两种方法，均可以解决 “Unexpected token import” 的问题。其中，Babel 的配置比较简单，而 webpack 能够更加强大，更加灵活。具体的使用，需要根据实际情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67088eb3d91dce0dc8725b61