babel 7 簡單指北

babel 7

對於 babel 7，babel 的官網已經介紹得很是詳細了，但有時感受文檔和實際使用老是差那麼一點東西。

主要包

---

先來看一下主要的包，babel 7 對於包進行了一些簡化。

• @babel/cli: 用於執行相應命令

• @babel/core: 核心包，將 js 代碼分析成 AST

• @babel/preset-env: 包含 es6+ 的語法轉換規則，如箭頭函數、const 等

• @babel/polyfill: es6 內置對象和函數的墊片，如 Promise、Array.from 等

• @babel/plugin-transform-runtime: 防止 polyfill 污染全局變量

• @babel/runtime: 與 @babel/plugin-transform-runtime 配套使用

安裝 babel 7

---

npm init -y
npm i -S @babel/cli @babel/core

安裝完以後，能夠看見 package.json 下有 babel 的信息。

{
  "name": "babel_7",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3"
  }
}

新建一個 src 目錄，並在目錄下建立一個 index.js：

// src/index.js
const sum = (a, b) => a + b

接着新建 dist 目錄，存放打包文件，而後執行命令：

npx babel src/index.js -d dist/

能夠在 dist 下看見轉換後的 index.js，但內容如出一轍，由於 @babel/core 只複製把代碼轉換爲 AST，而後 babel 又把 AST 轉爲代碼，中間並無作任何處理。

@babel/cli 的一些命令

轉碼結果輸出到標準輸出
npx babel example.js
 
轉碼結果寫入一個文件
--out-file 或 -o 參數指定輸出文件
npx babel example.js --out-file compiled.js
或者
npx babel example.js -o compiled.js
 
整個目錄轉碼
--out-dir 或 -d 參數指定輸出目錄
npx babel src --out-dir lib
或者
npx babel src -d lib
 
-s 參數生成 source map 文件
npx babel src -d lib -s

配置

---

babel 7 提供了 3 種經過文件進行配置的方式。

1. babel.config.js

   適用場景：以編程的方式建立配置文件，但願編譯 node_modules 目錄下的模塊

   module.exports = function (api) {
     api.cache(true);
   
     const presets = [ ... ];
     const plugins = [ ... ];
   
     return {
       presets,
       plugins
     };
   }

2. .babelrc

   適用場景：簡單的靜態配置

   {
     "presets": [...],
     "plugins": [...]
   }

   也能夠將上面的配置移到 package.json 中：

   {
     "name": "my-package",
     "version": "1.0.0",
     "babel": {
       "presets": [ ... ],
       "plugins": [ ... ],
     }
   }

3. .babelrc.js

   適用場景和 babel.config.js 相似

   const presets = [ ... ];
   const plugins = [ ... ];
   module.exports = { presets, plugins };

   還能夠調用 Node.js 的任何 API，例如基於進程環境進行動態配置：

   const presets = [ ... ];
   const plugins = [ ... ];
   
   if (process.env["ENV"] === "prod") {
     plugins.push(...);
   }
   
   module.exports = { presets, plugins };

@babel/polyfill、@babel/preset-env

---

npm i -S @babel/polyfill
npm i -D @babel/preset-env

安裝完以後，在根目錄下建立 .babelrc 文件，進行一些簡單配置:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

再將 src/index.js 改一下：

// src/index.js
import "@babel/polyfill"

let list = new Set()
list.set(0, 'hhh')

const sum = (a, b) => a + b

而後運行轉換命令：

npx babel src/index.js -d dist/

而後會發現 dist/index.js 中 es6+ 的語法轉換爲了 es5，並且還添加了一堆require(...)，這些都是 polyfill，但沒用到的一些東西也依然打包進來了，對於這種狀況，babel 7 提供了useBuiltIns。

useBuiltIns

useBuiltIns: "usage", "entry", "false"。默認爲 false。

• usage: 在每一個文件中使用 polyfill 時，爲 polyfill 添加特定導入，babel 利用捆綁器只加載一次相同的polyfill。

• entry: 使用 entry 屬性，必須在項目入口處引入一次 @babel/polyfill。而後 babel 在作代碼轉換的時候，會把

  import @babel/polyfill

  轉成

  require("core-js/modules/es6.array.copy-within");
  require("core-js/modules/es6.array.every");
  require("core-js/modules/es6.array.fill");
  // more

• false: 不引入 polyfill

將 .babelrc 下的useBuiltIns改成usage，再執行轉換命令，就會發現 polyfill 變成了按需導入。

targets

babel 7 還提供了targets，這個配置主要用於指定須要支持的環境，通常是指瀏覽器版本。（ targets 還能夠指定 node、android、ios、electron 等其餘環境）

設置了 targets，babel 在轉換前，會先檢查 targets 指定的環境已經支持了哪些新語法和 API，而後就再也不轉換或者不引入已經支持的內容。

配置 targets，依然是修改 .babelrc 文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 10"]
        }
      }
    ]
  ]
}

@babel/plugin-transform-runtime、@babel/runtime

---

使用 @babel/polyfill 會對全局對象進行污染，因此可使用 @babel/plugin-transform-runtime 和@babel/runtime 防止這種現象。

@babel/plugin-transform-runtime 會在你須要的地方自動引入你使用到的新方法。

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

安裝完畢以後依然是修改 .babelrc 文件：

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

而後修改一下 src/index.js：

// src/index.js

class Person {
  constructor (name) {
    this.name = name
  }
}

而後用命令進行轉換，會發現轉換結果和使用 @babel/polyfill 是有一點不同的。

注意： 若是使用 @babel/runtime 的話，一些類的實例方法如：foobar.includes("foo")將沒法工做。由於它必須在原生對象的原型鏈上進行修改。

區別

看了上面的作法，你可能會以爲困惑，爲何要一塊兒使用 @babel/plugin-transform-runtime、@babel/runtime 呢，爲何不能單獨使用一個？

實際上是由於 babel 轉換時，@babel/plugin-transform-runtime 這個插件會自動引入使用到的新方法，而引入的這些 polyfill 包是在 @babel/runtime 裏面的，因此 @babel/runtime 須要安裝在 dependency（生產環境）下，@babel/plugin-transform-runtime 則安裝在 devDependency（開發環境）下。

使用哪個？

至因而使用 @babel/polyfill，仍是 @babel/runtime，我也不太清楚，網上的說法大體都是：

通常庫或工具中使用 @babel/runtime，由於它能夠避免全局的污染。若是是項目中能夠直接使用 @babel/polyfill。

其實就是看使用場景吧，畢竟各有利弊。