Babel 编译 ES6 代码时遇到 "ReferenceError: xxx is not defined" 的解决方法

在使用 Babel 编译 ES6 代码时，有时候会遇到 "ReferenceError: xxx is not defined" 的错误，这是因为 Babel 默认只转换语法，不会自动引入对应的库或者模块。本文将介绍如何解决这个问题。

问题分析

在 ES6 中，我们可以使用一些新的语法和特性，比如箭头函数、解构赋值、模板字符串等等。但是这些语法在旧版的浏览器和 Node.js 中并不被支持，为了让这些代码能够在低版本的环境中运行，我们需要使用 Babel 将 ES6 代码转换成 ES5 代码。

但是，Babel 转换的只是语法，对于一些新的 API 或者模块，Babel 并不会自动引入对应的库或者模块，导致运行时出现 "ReferenceError: xxx is not defined" 的错误。

解决方案

方案一：手动引入对应的库或者模块

对于一些新的 API 或者模块，我们需要手动引入对应的库或者模块。比如，如果我们使用了 Promise，我们需要手动引入 Promise 库：

import 'babel-polyfill';

// 在需要使用 Promise 的地方，使用 Promise

这里我们使用了 babel-polyfill 库，它会自动引入 Promise、Set、Map 等库，以及一些 ES6 的 API。在使用之前，我们需要在入口文件中引入 babel-polyfill：

import 'babel-polyfill';

// 其他代码

方案二：使用 babel-plugin-import

babel-plugin-import 是一个 Babel 插件，它可以自动引入对应的库或者模块。我们只需要在 Babel 配置文件中添加它，然后在代码中使用对应的 API 或者模块即可。

首先，我们需要安装 babel-plugin-import：

npm install babel-plugin-import --save-dev

然后，在 Babel 配置文件中添加插件：

// javascriptcn.com 代码示例
{
  "plugins": [
    ["import", {
      "libraryName": "lodash",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }]
  ]
}

这里以引入 lodash 为例，我们设置了 libraryName 为 lodash，libraryDirectory 为空，camel2DashComponentName 为 false。这样，我们就可以在代码中使用 lodash 的 API 了：

import { debounce } from 'lodash';

// 在需要使用 debounce 的地方，使用 debounce

总结

Babel 编译 ES6 代码时遇到 "ReferenceError: xxx is not defined" 的错误，是因为 Babel 默认只转换语法，不会自动引入对应的库或者模块。我们可以手动引入对应的库或者模块，也可以使用 babel-plugin-import 插件来自动引入。在使用 babel-plugin-import 插件时，我们需要在 Babel 配置文件中添加对应的配置。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650943ba95b1f8cacd400b41