webpack4学习之 babel

webpack之前一知半解，这次有空就把最新的webpack4好好学习一下(2019-05-29 因为webpack的很多东西版本都在升级，网上博客很多都是老版本的，所以加个时间方便大家决定是否有必要阅读)

presets预设

预设是一组插件的集合，插件才是让babel解析之后转换的关键，插件是从前到后，而预设是从后到前执行，插件在 Presets 前运行。

常见的预设有以下几个：

@babel/preset-env

@babel/preset-env是babel v7新版的，旧版的叫babel-preset-env，按照es年代分有什么babel-preset-es2015（就是转换es6版本的），@babel/preset-es2016之类的，如果一个一个导入到你的项目会很麻烦，新的es出来了你还得加，现在@babel/preset-env就是所有的es集合，有了它，babel-preset-es2015，@babel/preset-es2016都不需要加了（除非你就有什么特定配置）。

"presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        },
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]

targets是指转换哪些浏览器，如果没有什么特别的需求，选择默认的就好了

useBuiltIns 现在是重点了，选择如下 "usage" | "entry" | false, defaults to false

false就不用解释了，就是不使用这个功能呗。

介绍另外2个我们先看看@babel/polyfill这个东东，它基本包含了所有的babel的功能，使用的方法也很简单，直接在主js上面import "@babel/polyfill";就可以了，缺点也很明显

1 它把所有的功能都导入你的项目里去了，自然会导致你的项目打包过大，如果你不在意自然直接使用最简单，用最少的配置。（usage" | "entry就是用来优化这个的）

2 它会在全局加入一些方法如promise，会导致全局污染

entry选项是这样子的，根据你选择的浏览器环境来决定@babel/polyfill有哪些是需要加入你项目的，如果你的指定的浏览器支持一些语法，就没必要再导入一遍了

usage则是根据你的代码中用到了哪些（直接通过名字来决定）新方法，就从@babel/polyfill加入到你的项目，该方法目前还是实验性的。

corejs 官网的文档配置里目前没有这个，但是“useBuiltIns": "usage"后会提示安装core-js，版本如果为3就要指定版本，并且在主文件以前是import "babel-polyfill";，改为import "core-js/stable"; import "regenerator-runtime/runtime";

@babel/preset-stage-0 @babel/preset-stage-1 ...

这些其实已经被废弃了，不过挺经典的值得了解一下，stage-0是指标准，目前还没有纳入es的一些功能，装饰器就是其中之一

stage0 (https://babeljs.io/docs/en/babel-preset-stage-0) 只是一个美好激进的想法，一些 Babel 插件实现了对这些特性的支持，但是不确定是否会被定为标准.

stage1 (https://babeljs.io/docs/en/babel-preset-stage-1) 值得被纳入标准的特性.

stage2 (https://babeljs.io/docs/en/babel-preset-stage-2) 该特性规范己经被起草，将会被纳入标准里.

stage3 (https://babeljs.io/docs/en/babel-preset-stage-3) 该特性规范已经定稿，大浏览器厂商和 Node.js 社区己开始着手实现.

stage0包含了它下面的，stage1也包含了它下面的的，依次包含。

但是官网说他们被废弃了，具体原因大概是因为太好用了，以至于大家都是stage0就开始用了，但是却不知道stage0到底包括什么，如果规范有了变化，你都不知道到底发生了什么，于是乎babel决定

你想用一些es还没有出来的功能，你要用插件的方式安装具体你需要的而不是一个stage0了事，文档如下

https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

@babel/plugin-transform-runtime 和 @babel/runtime

这2个就是用来解决@babel/polyfill的第二个问题，污染环境变量的问题，其实官网上说了，污染的问题只有可能是你的项目作为库使用才会存在，普通的应用程序，直接使用polyfill是没有问题

@babel/runtime是运行时，而@babel/plugin-transform-runtime是插件安在dev上的，

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

这2个只能用来解决全局变量问题，原型的实例方法没办法加，还是要用到polifill