随着 ES6 的逐步普及，越来越多的前端开发人员开始使用 ES6 进行编程。然而，由于目前大多数浏览器并不完全支持 ES6，因此需要使用 Babel 进行转码。在使用 Babel 进行转码时，我们可能会遇到一些常见的错误，本文将介绍一些常见的错误以及如何避免它们。
1. 在编译时报错 "Unexpected token"
在编译时遇到 "Unexpected token" 错误很常见，这通常是因为 Babel 尝试将无效的语法转换为有效的语法导致的。比如以下代码：
const foo = [1, 2, 3]; console.log(...foo);
这段代码使用了 ES6 的扩展运算符，将数组 foo 展开成了一组参数传递给了 console.log 方法。然而，Babel 在转码时会将该语法转换为以下代码：
"use strict"; var foo = [1, 2, 3]; console.log.apply(console, foo);
这段转换后的代码并不能被浏览器或 Node.js 解释执行，因此会报错。解决该问题的方法是在 .babelrc 文件中添加 transform-runtime 插件：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage"
}]
],
"plugins": ["@babel/plugin-transform-runtime"]
}然后在项目中安装 @babel/runtime：
npm install --save @babel/runtime
2. 在编译时报错 "Cannot read property 'indexOf' of undefined"
在使用 Babel 进行编译时，有时会出现 "Cannot read property 'indexOf' of undefined" 错误，这通常是因为 Babel 找不到 Promise 对象。解决该问题的方法是在项目中安装 Promise polyfill：
npm install --save-es-dev @babel/polyfill
然后在 .babelrc 文件中添加 "useBuiltIns": "usage"：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage"
}]
]
}3. 在浏览器中运行时报错 "ReferenceError: regeneratorRuntime is not defined"
在使用 async/await 语法时，有时会在浏览器中运行时报错 "ReferenceError: regeneratorRuntime is not defined"。这是因为 async/await 语法需要使用 generators 和 regeneratorRuntime 模块，而这些模块不是默认加载的。解决该问题的方法是在项目中安装 regenerator-runtime：
npm install --save regenerator-runtime
然后在 .babelrc 文件中添加 "regenerator": true：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"regenerator": true
}]
]
}4. 使用 ES6 的模块化语法
在使用 ES6 的模块化语法时，需要在代码中使用 import 和 export 这两个关键字。然而，在浏览器中并不支持这两个关键字。解决该问题的方法是使用打包工具将代码打包成一个浏览器可识别的 JavaScript 文件。比较常用的打包工具有 webpack 和 rollup.js。
结论
在使用 Babel 进行转码时，常常会遇到一些错误。针对不同的错误，我们可以采取不同的解决方法，比如添加 transform-runtime 和 @babel/polyfill 插件，安装 Promise polyfill 和 regenerator-runtime 模块，并使用打包工具将代码打包成一个浏览器可识别的 JavaScript 文件。通过不断地学习和探索，可以更好地理解 ES6 的各种特性，并更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710b4d8377015f5a1a247ed