webpack使用教程(五) 转化es5语法这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

1 es6转换

首先在index.js中我们写一段es6代码

let fn = () =>{
    console.log('====================================');
    console.log(1);
    console.log('====================================');
}
fn();

安装loader插件

yarn add babel-loader @babel/core @babel/preset-env

rules: [{
   test: /\.js$/,
   use: {
     loader: 'babel-loader',
     options:{ // 用babel-loader 需要把es6-es5
       presets:[
         '@babel/preset-env'
       ]
     }
   }
 }]

我们在写上es7的语法

class App {
    a=1
}

然后你就报错了

yarn add @babel/plugin-proposal-class-properties

rules: [
     {
      test: /\.js$/,
      use: {
      loader: 'babel-loader',
      options:{ // 用babel-loader 需要把es6-es5
      	presets:[
      		'@babel/preset-env'
      	],
      	plugins:[
      		'@babel/plugin-proposal-class-properties'
      	]
     }
}]

2 es7/es8转换

1 plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

配置

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

2 babel/plugin-transform-runtime

这时候就需要 polyfill 来转转化这些API babel 转译语法需要一些plugin 如 react,es2015,stage-0,stage-1等等其中的 es2015 表示 babel会加载 es6 相关的编译模块，然后 stage-0 表示的是什么呢？ stage 系列集合了一些对 es7 的草案支持的插件，由于是草案，所以作为插件的形式提供。

* stage-0 - Strawman: just an idea, possible Babel plugin.
* stage-1 - Proposal: this is worth working on.
* stage-2 - Draft: initial spec.
* stage-3 - Candidate: complete spec and initial browser implementations.
* stage-4 - Finished: will be added to the next yearly release.

stage 是向下兼容 0>1>2>3>4 所包含的插件数量依次减少

babel polyfill 有三种：

* babel-runtime
* babel-plugin-transform-runtime
* babel-polyfill

1 用法

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

配置完成后打包会出现这样一个报错，原因是

include:path.resolve(__dirname,'src'),
exclude:/node_modules/  // 排除掉node_modules

展示一下全部的代码

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options:{ // 用babel-loader 需要把es6-es5
        presets:[
          '@babel/preset-env',
        ],
        plugins:[
          [
            "@babel/plugin-proposal-decorators", {
              "legacy": true
            }],
          [
            "@babel/plugin-proposal-class-properties", {
              "loose": true
            }],
          [
            "@babel/plugin-transform-runtime",
            {
              "absoluteRuntime": false,
              "corejs": false,
              "helpers": true,
              "regenerator": true,
              "useESModules": false
            }
          ]
        ],
        include:path.resolve(__dirname,'src'), // 加载目录
        exclude:/node_modules/ //出去目录
      }
    }
}]

babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM里面不兼容的API

比如 Promise,Set,Symbol,Array.from,async 等等的一些API

主要功能：

避免多次编译出helper函数：

Babel转移后的代码想要实现和原来代码一样的功能需要借助一些帮助函数，比如：

这个插件的默认配置默认用户已经提供了所有polyfillable APIs，因此想要无缝使用不污染全局环境的内建功能需要特别标明corejs。

* 当你使用generators/async方法、函数时自动调用babel-runtime/regenerator
* 当你使用ES6 的Map或者内置的东西时自动调用babel-runtime/core-js
* 移除内联babel helpers并替换使用babel-runtime/helpers来替换

2 transform-runtime优点

* 不会污染全局变量
* 多次使用只会打包一次
* 依赖统一按需引入,无重复引入,无多余引入

3 transform-runtime缺点

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

总的来说一句话，你可以使用内置的一些东西例如Promise,Set,Symbol等，就像使用无缝的使用polyfill,来使用babel 特性，并且无全局污染、极高代码库适用性。虽然这种方法的优点是不会污染全局，但是，实例的方法

Array.prototype.includes();

babel-polyfill

babel-polyfill则是通过改写全局prototype的方式实现，比较适合单独运行的项目。

开启babel-polyfill的方式，可以直接在代码中require，或者在webpack的entry中添加，也可以在babel的env中设置useBuildins为true来开启。

但是babel-polyfill会有近100K，打包后代码冗余量比较大，对于现代的浏览器,有些不需要polyfill，造成流量浪费污染了全局对象