一个 includes 不兼容引发的基础学习

ECMAScript

ES5 - 2009完成

ES6/ES2015 2015

ECMAScript 2016 (includes)

ECMAScript 2016 (ECMA-262)
The definition of 'Array.prototype.includes' in that specification. Standard

ECMAScirpt Proposals

Polyfill

polyfill and shim

polyfill rewrite prototype 、shim new methods

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "es2015",
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", 
            "transform-es2015-modules-commonjs",
            "dynamic-import-node"]
    }
  }
}

presets - plugin 集合（从最后一个执行）

plugins - 单一特殊代码转换（先执行）

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "es2015",
    "stage-2"
  ]
}

https://www.babeljs.cn/docs/babel-preset-env

https://browserl.ist/?q=last+2+versions

preset

es2015 es6

react

stage-0 transform-do-expressions / transform-function-bind (向下包含)

stage-1

stage-2

...

语法转义器。主要对javascript最新的语法糖进行编译

并不负责转译javascript新增的api和全局对象

https://babeljs.io/docs/en/babel-plugin-transform-runtime

https://babeljs.io/repl/#?babili=false&browsers=ie%206&build=&builtIns=false&spec=true&loose=true&code_lz=NoRgNABATJDMC6A6AlgOwMYBsCuATApgM4AUUAlANwBQm-ALhAIYQC8EIFQA&debug=true&forceAllTransforms=true&shippedProposals=true&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015%2Ces2016%2Ces2017%2Ces2015-loose%2Cenv&prettier=false&targets=Node-4.2&version=7.4.5&externalPlugins=babel-plugin-array-includes%402.0.3

babel-polyfill ->（core-js）-> includes

https://babeljs.io/docs/usage/polyfill/

transform-runtime -> babel-runtime (可配置 polyfill)

https://babeljs.io/docs/plugins/transform-runtime

* 不支持实例化的方法Array.includes(x) 就不能转化
* 如果使用的API用的次数不是很多，那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大

The main difference is that polyfill works for all polyfills but must be installed as a production dependency. And you need to use import 'babel-polyfill'; to make it work. And it will pollute the global scope.

The transform-runtime provides many of the same features, but won't provide special functions like array.includes() or array.values(). So it's safer to use inside a library.

If you're building an app, you can use babel-polyfill. If you're building a library, make sure not to use babel-polyfill, and only the transform-runtime.

You'll need to find alternatives for implementing any of the functions like array.includes or array.values().

https://github.com/leebenson/babel-preset-node5/issues/7

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "autoprefixer": {
       "browsers": "> 5%"
    }
  }
}

browserlist

https://github.com/Nyalab/caniuse-api

https://github.com/babel/babel-preset-env/issues/318

Version Map

babel

By pokerone

babel

More from pokerone