npm 包 @gerhobbelt/babel-plugin-array-includes 使用教程

介绍

@gerhobbelt/babel-plugin-array-includes 是一个 Babel 插件，可以将代码中的 ES6 中的 Array.prototype.includes() 转化为 less-efficient 的判断方式，可以解决一些非常奇怪的问题，特别是在 IE11 下使用时。本文将为您介绍该插件的使用方法。

安装

npm install -D @gerhobbelt/babel-plugin-array-includes

用法

配置 Babel

在 Babel 配置文件 .babelrc 中添加以下内容:

{
  "plugins": [
    "@gerhobbelt/babel-plugin-array-includes"
  ]
}

这将会安装并且启用 @gerhobbelt/babel-plugin-array-includes 插件。

效果演示

例如，下面这行代码：

let arr = [1, 2, 3];
console.log(arr.includes(1));

将会被转化为如下代码：

let arr = [1, 2, 3];
console.log(arr.indexOf(1) !== -1);

在 IE11 下，原本可以正常工作的 Array.prototype.includes() 会出现一些奇怪的问题，这种情况下，以上转化后的代码可以解决这些问题。

配置选项

@gerhobbelt/babel-plugin-array-includes 插件有两个可选的配置选项。

functionName

该选项用于定义替换的方法名，默认为 indexOf。例如：

{
  "plugins": [
    ["@gerhobbelt/babel-plugin-array-includes", {
      "functionName": "arrIndexOf"
    }]
  ]
}

将会把 Array.prototype.includes() 转化为 arrIndexOf() 方法。

allowArrayLike

该选项默认为 false，如果设置为 true 的话，将会在以下方法调用中使用该替换方式：

• arr.includes() 对数组的调用
• Array.prototype.includes.call(obj, el) call、apply 和 bind 方法 (第一个参数为对象且该对象有 length 属性)

例如：

{
  "plugins": [
    ["@gerhobbelt/babel-plugin-array-includes", {
      "allowArrayLike": true
    }]
  ]
}

将会把以下代码：

function foo(...args) {
  console.log(Array.prototype.includes.call(args, 1));
}
foo(1, 2, 3);

转化为：

function foo(...args) {
  console.log(args.indexOf(1) !== -1);
}
foo(1, 2, 3);

总结

通过插件 @gerhobbelt/babel-plugin-array-includes 可以解决 IE11 下使用 Array.prototype.includes() 出现的问题。您也可以通过配置选项来自定义替换方法和扩展允许替换的情况。如果有类似的问题，建议可以使用该插件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f03de2c403f2923b035be1f