随着前端技术的不断进步，越来越多的项目采用了新的 ECMAScript 版本编写 JavaScript 代码。但是，由于浏览器的兼容性问题，这些代码需要通过 babel 等工具进行转换，以便在更老的浏览器中运行。但是，即使经过 babel 转换后，代码在 IE 中依然有可能出现错误。本文将介绍这种情况的出现原因，并提供一些解决方案。
问题原因
IE 浏览器本身的兼容性问题是导致代码在 IE 中出现错误的主要原因。由于相对较老的 IE 浏览器对 ES6、ES7 等新版本的 JavaScript 语法支持不完全，因此需要使用 babel 等工具将这些语法转换成 ES5 语法。但是，即使经过转换，这些语法在 IE 中仍有可能出现问题。以下是几个常见的原因：
- 使用了新的关键字
在 ES6 中，引入了一些新的关键字，如 let、const、class、extends 等等。在将这些关键字转换成 ES5 语法时，babel 会使用一些 hack 技巧来模拟这些关键字的行为。然而，这些 hack 技巧并不能完全模拟新关键字的行为，导致了在 IE 中出现错误的情况。
- 改变了原型
ES6 中，class 语法被引入并用于实现类继承。当通过 babel 将这些代码转换成 ES5 语法时，babel 会使用一些方法来模拟类的继承。但是，在 IE 中，这些方法可能会有不兼容的问题，导致代码出现错误。
- 使用了新的 API
除了新的关键字和语法，ES6、ES7 还引入了一些新的 API，如 Promise、Array.from、Object.assign 等。由于这些 API 并没有在较老的浏览器中完全实现，babel 会使用 polyfill 来模拟这些 API 的行为。然而，并非所有的 polyfill 都能可以完美地模拟这些新的 API，导致在 IE 中出现错误的情况。
解决方案
针对以上的一些情况，我们可以采取下面的几个解决方案来解决代码在 IE 中出现的问题。
方案一：@babel/preset-env
@babel/preset-env 是 babel7 中推出的一款预设（preset）。它可以智能地根据目标环境（浏览器、Node.js 等）以及需要使用的 ECMAScript 版本，自动配置插件，完成转换操作。它可以精准地为每个目标环境进行转换，避免出现一些不必要的 hack，从而提高代码的兼容性。
方案二：使用 core-js/shim.js
core-js 是一个 polyfill 库，它为 ES6、ES7、ES8 等版本中缺失的 API 提供了 polyfill。通过将 core-js 添加到项目依赖项中，我们可以在代码中使用不存在于目标环境的 API，同时不需要担心兼容性的问题。
方案三：只选用需要使用的功能
如果项目的代码中只使用了一小部分 ES6、ES7 中的新功能，那么我们可以只使用需要使用的功能，而不是将所有的功能都进行转换。这样可以避免将一些不必要的新特性引入到旧浏览器中。同时，这也可以减少打包出来的代码体积。
示例代码
如果你想在你的项目中测试相关功能，请使用如下代码：
安装依赖：
npm install --save-dev @babel/core @babel/cli @babel/preset-env core-js
.babelrc 配置:
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-代码:
const arr = [1, 2, 3] const arr2 = Array.from(arr, x => x * 2) console.log(arr2)
上面这段代码使用了 Array.from 这个新 API，同时使用了 @babel/preset-env 和 core-js/shim.js 来进行转换和 polyfill。这样可以保证代码在新旧浏览器中均能正常运行。
总结
本文介绍了 babel 转换后代码在 IE 中出现错误的原因，并提供了一些解决方案。我们可以通过 @babel/preset-env、core-js 和按需转换等方式来解决这些问题。同时，我们也应该注意在项目中只引入必要的新特性，避免不必要的兼容性问题的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1a771f6b2d6eab3b7ab58