随着前端技术的更新迭代，越来越多的开发者开始尝试使用 ES6 语法，不过在 IE 浏览器中会出现一些兼容性问题。本文将为大家介绍如何解决这些问题。
ES6 转 ES5
IE 浏览器对 ES6 语法的支持很有限，因此我们可以使用 Babel 工具将 ES6 代码转为 ES5 代码来解决兼容性问题。Babel 可以将 ES6 的新特性转换成浏览器可以理解的 ES5 的语法。
安装 Babel
在 Node.js 环境下，我们首先需要安装 Babel 的命令行工具：
npm install -g babel-cli
之后我们需要安装解析 ES6 的插件：
npm install --save-dev babel-preset-es2015
配置 Babel
在项目的根目录下创建一个 .babelrc 文件，用于配置 Babel 转换代码时所需要的插件。示例配置文件如下：
{
"presets": [
"es2015"
]
}使用 Babel 转换代码
在转换代码之前，我们需要在项目中安装 Babel 的核心模块：
npm install --save-dev babel-core
然后在项目中创建一个新的目录用于存放转换后的代码，如 dist 目录。在控制台输入以下命令，将 ES6 代码转为 ES5 代码并输出到 dist 目录中。
babel src -d dist
其中 src 参数为 ES6 代码所在的目录，dist 参数为转换后的代码所输出的目录。
使用转换后的代码
在 HTML 页面的 <script> 标签中引用转换后的代码即可。
<script src="path/to/dist/my-es5.js"></script>
Polyfill
除了将 ES6 代码转为 ES5 代码之外，还可以使用 Polyfill 解决兼容性问题。Polyfill 是指将浏览器不支持的 API 或语法补充到浏览器的 JavaScript 环境中，使得开发者可以使用这些新 API 或语法。
安装 Polyfill
我们可以使用 core-js 这个 Polyfill 库，它包括了许多常用的新 API 和语法。
npm install --save core-js
引用 Polyfill
在项目中的 JavaScript 文件的开头引入 Polyfill：
import "core-js/stable"; import "regenerator-runtime/runtime";
在 IE 浏览器中，Polyfill 会将缺失的 API 或语法替换成它们的实现，使得这些功能可以在浏览器中正常运行。
示例代码
本文不仅提供了解决方案，还提供了一份示例代码。示例代码包括了使用 Babel 转换 ES6 代码和使用 Polyfill 解决兼容性问题的实现。
转换 ES6 代码
以下是一份使用 ES6 语法编写的食谱类对象：
-- -------------------- ---- -------
----- ------ -
----------------- ------------ ------ -
--------- - -----
---------------- - ------------
---------- - ------
-
----- -
-----------------------
----------------------------
-------------------------- -- ----------------
----------------------
---------------------- -- -- ---------------- - --- --------
-
-接下来我们将使用 Babel 将这份代码转为 ES5 代码。在控制台中输入以下命令：
babel src -d dist
将会输出以下 ES5 代码：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
--- ------ - -------- ------------ ------------ ------ -
--------------------- --------
--------- - -----
---------------- - ------------
---------- - ------
--
-------------------- - -------- ----- -
-----------------------
----------------------------
--------------------------------- --- -
------ ---------------
---
----------------------
--------------------------- --- -- -
------ ----------------------- - -- -- --------------
---
--使用 Polyfill
在 JavaScript 文件的开头引入 Polyfill：
-- -------------------- ---- -------
------ -----------------
------ ------------------------------
----- ------ -
----------------- ------------ ------ -
--------- - -----
---------------- - ------------
---------- - ------
-
----- -
-----------------------
----------------------------
-------------------------- -- ----------------
----------------------
---------------------- -- -- ---------------- - --- --------
-
-在不支持 ES6 语法的浏览器中，Polyfill 会将代码中的缺失部分补充完整，使得代码可以在浏览器中正常运行。
结论
本文介绍了在 IE 浏览器中使用 ES6 出现兼容性问题的解决方案：通过 Babel 将 ES6 代码转为 ES5 代码或者使用 Polyfill 补充缺失的 API 或语法。希望本文能够帮助到前端开发者解决这类问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c8d26ddd3a70eb6d8960e