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是指转换哪些浏览器，若是没有什么特别的需求，选择默认的就行了

modules 有这些选择"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto" 是用来将将es6的模块化语法转换为哪一种语法，如今有webpack来作了，这个能够选择false了

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