在日常的前端开发中，我们经常会使用到 Array.from 这个函数来将类数组对象或可迭代对象转换为数组。但是，在某些情况下，我们会遇到一些莫名其妙的问题，例如返回的数组没有被正确地转换，或者在旧版本的浏览器中无法使用该函数。这时，我们就需要使用 Babel 来解决这些问题。
什么是 Babel？
Babel 是一个 JavaScript 编译器。它可以将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 代码，以便在现有环境中运行。Babel 不仅支持最新的 JavaScript 标准，还支持一些 TypeScript、React 等流行的前端技术。
Babel 如何解决 Array.from 的问题？
如果您在旧版本的浏览器中使用 Array.from，可能会遇到“类型错误：xxx 不是一个可迭代对象”这样的错误。这是因为旧版本的浏览器不支持可迭代对象。为了解决这个问题，我们可以使用 Babel。
安装 Babel
Babel 的安装非常简单，只需执行以下命令即可：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
配置 .babelrc 文件
Babel 需要配置一个 .babelrc 文件来指定转换规则。我们可以在项目根目录下创建一个 .babelrc 文件，并添加以下内容：
{
"presets": ["@babel/preset-env"]
}这里，我们使用了 @babel/preset-env 这个预设，它会自动启用所有 ECMAScript 2015+ 的语法转换。
转换代码
现在，我们已经安装好了 Babel，并设置好了 .babelrc 文件，可以开始将代码转换为向后兼容的版本。对于 Array.from 的问题，我们可以通过添加一个 Polyfill 解决它。Polyfill 是一种在旧浏览器中实现新 API 的技术。
在安装了 @babel/preset-env 之后，我们应该也会安装 core-js 这个库。这是一个包含大量 JavaScript 函数和对象的库，可以用于为旧浏览器提供新功能的支持。我们可以通过安装 @babel/polyfill，它依赖于 core-js，来解决 Array.from 的问题：
npm install --save @babel/polyfill
现在，我们可以在代码中添加以下一行来导入 @babel/polyfill：
import '@babel/polyfill';
这行代码会导入整个 Polyfill，但是会增加代码的体积，因此不适用于生产环境。为了在生产环境中使用 Polyfill，我们可以使用 @babel/plugin-transform-runtime。
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
然后，在 .babelrc 文件中添加以下配置：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}这将会将 @babel/polyfill 与 @babel/plugin-transform-runtime 结合使用，在代码中仅添加必要的 Polyfill，以减少包的大小。
示例代码
现在，我们来看一个示例代码来演示如何使用 Babel 解决 Array.from 的问题：
import '@babel/polyfill'; const set = new Set([1, 2, 3]); const arr = Array.from(set); console.log(arr); // [1, 2, 3]
这个示例代码使用 Set 对象创建了一个数组，并使用 Array.from 将其转换为数组。由于 Set 对象是可迭代对象，因此这段代码可以正常工作。在导入 @babel/polyfill 后，我们可以在旧版本的浏览器中安全地使用该代码。
总结
使用 Babel 可以帮助我们解决许多前端开发中的问题，特别是在浏览器兼容性方面。在本文中，我们演示了如何使用 Babel 解决 Array.from 的问题，同时也介绍了如何在生产环境下使用 Babel。Babel 是一个非常强大的工具，可以大大提高开发效率和代码质量，希望大家能够好好利用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489186d48841e9894764693