【webpack：loader】Babel

babel介紹

1. Babel 是一個 JavaScript 編譯器，能夠把ES6的語法轉爲兼容瀏覽器的ES5語法；
2. Babel能夠單獨使用，可是通常都是和webpack結合一塊兒使用
3. webpack裏使用babel最基本的幾個包：babel-loader、 babel-core 、babel-preset-env 、babel-polyfill

---

@babel/core

• @babel/core包括了整個babel的工做流（輸入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> 輸出字符串），是babel的核心包。
• 能夠看作 babel 的編譯器。babel 的核心 api 都在這裏面，好比 transform，主要都是處理轉碼的。它會把咱們的 js 代碼，抽象成 ast，即 abstract syntax tree 的縮寫，是源代碼的抽象語法結構的樹狀表現形式。
• 咱們能夠理解爲，它定義的一種分析 js 語法的樹狀結構。也就是說 es6 的新語法，跟老語法是不同的，那咱們怎麼去定義這個語法呢。因此必需要先轉成 ast，去發現這個語法的 kind，分別作對應的處理，才能轉化成 es5.

---

@babel/preset-env

• Babel插件通常儘量拆成小的力度，開發者能夠按需引進。好比對ES6轉ES5的功能，Babel官方拆成了20+個插件。
• 這樣的好處顯而易見，既提升了性能，也提升了擴展性。好比開發者想要體驗ES6的箭頭函數特性，那他只須要引入transform-es2015-arrow-functions插件就能夠，而不是加載ES6全家桶。
• 但不少時候，逐個插件引入的效率比較低下。好比在項目開發中，開發者想要將全部ES6的代碼轉成ES5，插件逐個引入的方式使人抓狂，不單費力，並且容易出錯。
• 這個時候，能夠採用Babel Preset。
• 能夠簡單的把Babel Preset視爲Babel Plugin的集合。
• 這個 preset 真是神器啊，它能根據當前的運行環境，自動肯定你須要的 plugins 和 polyfills。
• Plugin與Preset執行順序：能夠同時使用多個Plugin和Preset，此時，它們的執行順序很是重要。先執行完全部Plugin，再執行Preset。多個Plugin，按照聲明次序順序執行。多個Preset，按照聲明次序逆序執行。

---

browserslist

browserslist指定了項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來肯定須要轉譯的 JavaScript 特性和須要添加的 CSS 瀏覽器前綴。

三種方式去配置：

1. 在.babelrc或者babel.config.js中去配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4",
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}
複製代碼

2. 在package.json 裏面增長以下配置

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}
複製代碼

3. 在工程的根目錄下存在.browerslistrc配置文件

last 1 version
> 1%
maintained node versions
not dead
複製代碼

除了browserslist,另外還要在webpack.config.js中配置babel-loader

module: {
    rules: [
      {  ...其餘loader...},
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }
    ]
}
複製代碼

package.json中也要配置相關的依賴

"dependencies": {
    "babel-polyfill": "^6.26.0",
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
  },
複製代碼

要用@babel/polyfill的話，還要在入口文件中引入

---

@babel/polyfill&runtime&core-js

• Babel默認只轉換新的JavaScript語法（syntax），如箭頭函數等，而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼；因此光是使用@babel/preset-env是不夠的，咱們還須要polyfill；
• @babel/polyfill ——讓目標瀏覽器支持全部特性，無論它是全局的，仍是原型的，或是其它。這樣，經過 @babel/polyfill，不一樣瀏覽器在特性支持上就站到同一塊兒跑線。可是這樣作也有一個缺點，就是會污染全局變量，並且項目打包之後體積會增大不少，由於把整個依賴包也搭了進去。因此並不推薦在一些方法類庫中去使用。
• @babel/preset-env下有一個選項useBuiltIns，用於指導 @babel/preset-env 如何觸發 polyfills.useBuiltIns有三個可能的值 usage | entry | false。usage：根據實際項目中真正使用到的有須要兼容的polyfill添加進去
• @babel/runtime：
• @babel/runtime-corejs2：

---

學習參考

Babel中文文檔

你真的會用 Babel 嗎?

babel-polyfill & other

21 分鐘精通前端 Polyfill 方案

Babel V7 學習總結

babel入門到精通

webpack配合babel使用