随着 ES6 在前端开发中的普及，越来越多的开发者开始使用 ES6 的语法。然而，在使用 Babel 编译 ES6 代码时，我们有时会遇到 "Unexpected token import" 的问题。这个问题的出现可能会让我们的编译过程中断，导致代码无法正常运行。那么，这个问题究竟是怎么产生的，我们又该如何解决它呢？
问题产生的原因
在 ES6 中，我们可以使用 import 语句来引入其他模块的代码。然而，这个语法在旧版的 JavaScript 中是不被支持的，因此在使用 Babel 编译 ES6 代码时，就会出现 "Unexpected token import" 的问题。
具体来说，当 Babel 在编译 ES6 代码时，会将 import 语句转换为 CommonJS 或 AMD 规范的模块化语法。但是，如果我们没有配置好 Babel 的插件或者设置，就会导致 Babel 无法正确地将 import 语句转换为旧版的 JavaScript 语法，从而出现 "Unexpected token import" 的错误。
解决方法
为了解决 "Unexpected token import" 的问题，我们需要进行以下几个步骤：
1. 确认 Babel 的版本
首先，我们需要确认我们所使用的 Babel 版本是否支持 ES6 的语法。如果我们使用的是较旧的 Babel 版本，那么它可能无法正确地编译 ES6 代码。因此，我们需要升级到最新的 Babel 版本，以确保它能够正确地编译 ES6 代码。
2. 安装 Babel 插件
接下来，我们需要安装一些 Babel 插件，以使其能够正确地将 ES6 代码转换为旧版的 JavaScript 语法。具体来说，我们需要安装 @babel/preset-env 插件，它可以自动根据我们的配置，将 ES6 转换为支持的 JavaScript 版本。
我们可以使用以下命令来安装 @babel/preset-env 插件：
npm install --save-dev @babel/preset-env
3. 配置 Babel
安装完插件后，我们需要在 Babel 的配置文件中进行相应的配置。我们可以在 .babelrc 文件中添加以下内容：
{
"presets": ["@babel/preset-env"]
}这个配置告诉 Babel 使用 @babel/preset-env 插件来编译 ES6 代码，并自动将其转换为支持的 JavaScript 版本。
4. 修改代码
最后，我们需要修改我们的代码，以使其符合支持的 JavaScript 版本。具体来说，我们需要将 import 语句转换为 CommonJS 或 AMD 规范的模块化语法。例如：
// ES6 代码
import { foo } from 'bar';
// 转换后的代码
const { foo } = require('bar');需要注意的是，这个转换过程需要根据我们所使用的模块加载器和打包工具来进行相应的修改。如果我们使用的是 Webpack，那么可以使用 babel-loader 插件来自动进行转换。
示例代码
下面是一个示例代码，它演示了如何使用 @babel/preset-env 插件来解决 "Unexpected token import" 的问题：
-- -------------------- ---- ------- -- -------- ------ - --- - ---- -------- ----------------- -- -------- - ---------- --------------------- - -- ------ ------ ----- --- - ------- --------
在这个示例代码中，我们使用了 import 语句来引入 bar.js 中的 foo 变量。如果我们没有进行相应的配置，就会出现 "Unexpected token import" 的错误。但是，如果我们按照上述步骤进行配置和修改，就可以正确地编译和运行这个代码了。
总结
通过上述步骤，我们可以解决 "Unexpected token import" 的问题，并正确地编译 ES6 代码。需要注意的是，为了使代码更加兼容和可维护，我们应该尽可能地使用 ES6 的语法，并在编译时进行相应的转换。这不仅能够提高代码的可读性和可维护性，还能够提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661a21bfd10417a222addf9d