Babel 配置工程師應知應會

時間 2019-11-07

標籤 babel 配置工程師简体版

原文原文鏈接

Babel

Sorry，標題黨了，本文僅介紹 Babel 相關生態和一些配置心得。javascript

babel-register: 以文件形式實現 babel-node 功能，多用於實時編譯java

// 如下至關於 babel-node ./test --presets react
require('babel-register')({ presets: ['react'] });
require('./test')

babel-plugin-external-helpers: 把 helpers 收集到一個共享模塊或共享文件。
helper 函數是 babel 在 transform 時候經常使用的工具函數，對編譯模塊時，會將用到的 helpers 放到模塊頂部。若是編譯多個文件，就會重複引用，致使每一個模塊都定義一份。

babel-runtime: polyfill （內含 core.js 和 regenerator）、helpers 集合
babel-polyfill: 和 babel-runtime 相似，但直接總體引入目標環境中
babel-plugin-transform-runtime: 和 babel-polyfill 同樣，可是不是一次性引入所有 polyfill，而是根據你該文件用到多少，引多少

對比上述兩種 polyfill 方案，寫庫用 transform-runtime，寫應用就 babel-polyfillnode

基本都是使用 preset-env + 幾個 stage，通常來講到 stage-2 就能夠了。react

debug: 用來看最終引入了哪些 polyfill、plugins
useBuiltIns: 必須配合 babel-polyfill，貌似加入了此項之後，會獲得相似於 babel-plugin-transform-runtime 的效果。可是根據實驗得出，仍是 transform-runtime 在減肥上的效果更好。並且它不處理 helpers，你仍是不能省略 external-helpers 這個插件
modules: 是否編譯模塊導入導出語句
webpack 和 rollup 均可以對 es 模塊作 Tree Shaking，因此要設置 modules 爲 false
loose: 寬鬆模式，編譯的結果在運行時，其內部並不嚴格遵循 es6 標準
經過減小判斷和限制，有效提升效率甚至包體積
exclude/include: 編譯時排除或使用某插件

這個 env 和上面那個不一樣... 這裏的 env 是指，一個 babel 文件針對不一樣環境（讀取 NODE_ENV、BABEL_ENV），作不一樣配置webpack

{
  "env": {
    "development": {
      "presets": [
        [
          "env",
        ]
      ]
    },
    "production": {
      ...
    }
  }
}

babel-preset-react 已經包含了一組 pluginsgit

但上面這些只是知足基礎編譯而已，你額外能夠添加下面這個 preset 提升 React 應用的性能es6

npm i babel-preset-react-optimize

項目主頁有詳細的說明，簡要歸納下github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。