babel 7 對於 babel 7， "babel 的官網" 已經介紹得非常詳細了，但有時感覺文檔和實際使用總是差那麼一點東西。 主要包 先來看一下主要的包，babel 7 對於包進行了一些簡化。 "@babel/cli" : 用於執行相應命令 "@babel/core" : 核心包，將 js 代 ...
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 種通過文件進行配置的方式。
babel.config.js適用場景：以編程的方式創建配置文件，希望編譯
node_modules目錄下的模塊module.exports = function (api) { api.cache(true); const presets = [ ... ]; const plugins = [ ... ]; return { presets, plugins }; }.babelrc適用場景：簡單的靜態配置
{ "presets": [...], "plugins": [...] }也可以將上面的配置移到 package.json 中：
{ "name": "my-package", "version": "1.0.0", "babel": { "presets": [ ... ], "plugins": [ ... ], } }.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"); // morefalse: 不引入 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安裝完畢之後依然是修改 .babelrc 文件：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}然後修改一下 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。
其實就是看使用場景吧，畢竟各有利弊。
