前端开发中，我们常常会使用 ES6 中的新特性，比如 Array.from()，它可以将类数组对象或可迭代对象转换为真正的数组。而当我们使用 Babel 将 ES6 代码转换为 ES5 代码时，可能会遇到 Array.from() 方法解析出现错误的问题。
问题现象
在使用 Babel 将 ES6 代码转换为 ES5 代码时，如果使用了 Array.from() 方法，会出现类似如下错误：
TypeError: Array.from is not a function
这个错误会导致代码无法正常执行，从而影响开发效率。
问题原因
这个错误的原因在于 Babel 转译 ES6 代码时，它默认只转译语言特性（语法），而不会转译新的全局 API，比如 Array.from() 等。因此，在转译时，Babel 不会将 Array.from() 方法转换为对应的 ES5 代码。
解决方案
要解决这个问题，我们可以使用 Babel 提供的插件 babel-polyfill，它可以将所有缺失的全局 API 转译为对应的 ES5 代码。
具体使用方法如下：
- 安装
babel-polyfill：
npm install babel-polyfill --save
- 在入口文件（比如
main.js）中引入babel-polyfill：
import 'babel-polyfill';
- 在 Babel 配置文件中，添加插件配置：
{
"plugins": [
// 其他插件配置
"transform-runtime"
]
}这里使用的是 transform-runtime 插件，它可以将常见的全局 API 转换为对应的模块引入，避免全局污染。
- 重新编译代码：
npm run build
这时，Babel 会将 Array.from() 方法转换为对应的 ES5 代码，从而解决这个错误。
示例代码：
import 'babel-polyfill';
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']总结
在使用 Babel 转译 ES6 代码时，如果遇到 Array.from() 方法解析出现错误的问题，我们可以使用 babel-polyfill 插件解决。这个插件可以将缺失的全局 API 转译为对应的 ES5 代码，从而使代码能够正常执行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b19677d4982a6eb50fa3c