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