babel

原始代碼 --> [Babel Plugin] --> 轉換后的代碼

轉譯

安裝以下依賴:

1. @babel/core調用 Babel 的 API 進行轉碼
2. babel-loader[webpack 的 loader]（https://github.com/babel/babel-loader)
3. @babel/preset-env 在沒有任何配置選項的情況下, babel-preset-env 與 babel-preset-latest（或者 babel-preset-es2015, babel-preset-es2016 和 babel-preset-es2017 一起）的行為完全相同.
4. @babel/preset-stage-0稻草人提案(babel7 已移除)通過 npx babel-upgrade --write 升級為各種插件
5. @babel/preset-reactreact 語法轉譯
   preset 即 plugin 的套餐, 無需針對一個個語法規則去安裝 plugin

注:plugin 分為轉譯 plugin/語法 plugin/混合 plugin

env = es2015 + es2016 + es2017
stage-0 = stage-1 + stage-2 + stage-3

preset 具體包含了哪些插件可去官網查詢.

通過配置 targets 可以避免瀏覽器已經支持的特性被轉譯, 如果同時設置"IE >= 9"與 "chrome >= 66", 以 "IE >= 9" 為準進行轉譯

polyfill

注:方案 1 中的@babel/runtime + @babel/plugin-transform-runtime 在 babel7 下只包含 helper function(即 Babel 進行處理時需要的幫助函數), 如果想實現 polyfill , 需要使用@babel/runtime-corejs2, 升級詳情

["@babel/plugin-transform-runtime",  {
    "corejs": 2
}],

要實現真正的按需引入,即使用什么新特性打包什么新特性,可以使用實驗性的 useBuildIns:"usage".

Babel 正在向每個文件中注入 helper 并使代碼膨脹

解決方案:@babel/runtime + @babel/plugin-transform-runtime

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

在 webpack 中正確使用 Babel

1. 利用環境變量合理使用 babel 對不同環境的代碼進行處理,例如在開發環境不要引入 polyfill,在開發環境利用 plugin 將動態 import 轉為 require 加快打包速度

2. 開啟 babel-loader 的緩存加快打包速度

總結

最好的實踐方式:起一個 webpack 環境,配置不同的.babelrc 觀察每次打包后的情況,懶得搭環境可以去這個倉庫切換到feature/2-babel-support.
這比任何文章都來得實在,多看官方文檔,中文總結只是一個參考,具體表現如何還是看實踐+文檔.

1. 轉譯方案: @babel/preset-env + @babel/preset-react + 通過命令行升級的 stage-0
2. polyfill 方案: @babel/polyfill + @babel/preset-env[useBuiltIns:"entry"]
3. helpers 重復注入解決: @babel/runtime + @babel/plugin-transform-runtime

參考文章及推薦閱讀:

• babel
• 大前端的自動化工廠— babel
• babel 7 教程
• 升級至 babel 7
• 再見, babel-preset-2015
• 你真的會用 babel 嗎？
• 21 分鐘精通前端 Polyfill 方案
• babel-polyfill VS babel-runtime VS babel-preset-env