引言
在 ES6 中，Array 原型新增了一个方法 includes，可以方便地查找数组中是否包含某个元素。但是，该方法在一些老版本的浏览器中并没有得到支持，不能够直接使用。本文将介绍如何通过 Babel 编译器使你的 ES6 代码能够在所有浏览器上支持 includes 方法。
Babel 编译
Babel 是一个用于将 ES6、ES7、ES8 等新版 JavaScript 编译为 ES5 或其他较老版本的 JavaScript 的工具。它能够将包含新语法的 JavaScript 代码转换为可以在大多数浏览器中运行的代码，并保持其功能不变。
通常情况下，在使用 Babel 编译器时，我们只需要安装 babel-plugin-transform-runtime 和 babel-preset-env 两个插件，然后在 .babelrc 文件中进行配置即可。具体步骤如下：
安装插件
npm install --save-dev babel-plugin-transform-runtime babel-preset-env
在 .babelrc 文件中进行配置
在 .babelrc 文件中配置
babel-plugin-transform-runtime和babel-preset-env两个插件，如下所示：-- -------------------- ---- ------- - ---------- - ------- - ---------- - ----------- ------ - ---------- ------- -- --- - -- -- ---------- - ------------------- - -这里，我们使用的是
babel-preset-env插件，它会根据我们配置的targets，自动将语法转换成目标浏览器支持的语法；使用babel-plugin-transform-runtime插件，它会自动替换我们的创建器，减小代码大小。
配置 includes 方法支持
由于 babel-preset-env 插件只会支持 ES6 标准里定义的特性，而 includes 方法属于 ECMAScript 2016 的特性，因此需要手动添加配置项以支持该方法。
我们只需要在 env 的配置中添加 useBuiltIns 属性即可，如下所示：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
--
-------------- -------
--
--
---------- -
-------------------
-
-其中，useBuiltIns 的值为 "usage"，表示使用 "usage" 模式，该模式会根据代码中是否使用了 includes 方法来自动引入对应的 polyfill。
完整的 .babelrc 配置文件如下：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
--
-------------- -------
--
--
---------- -
-------------------
-
-示例代码
下面是一个包含 includes 方法的 ES6 代码示例，经过 Babel 编译后可以在所有浏览器中运行：
const arr = [1, 2, 3];
if (arr.includes(2)) {
console.log('数组中包含元素 2');
}结论
通过 Babel 编译器的配置，我们能够让我们的 ES6 代码在所有浏览器上支持 includes 方法，从而保证我们的代码能够在广大用户中得到正确的运行。同时，本文介绍的配置方法也可以用于支持 ES6 中的其他语法特性，欢迎大家尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67077a59d91dce0dc8691beb