你真的會用 Babel 嗎?

zhuangxe 7年前發布 | 21K 次閱讀 Babel 前端技術

引入

對于 babel 的使用，近半年來一直停留在與 webpack 結合使用，以及在瀏覽器開發環境下。導致很多 babel 的包，我都不清楚他們是干嘛的。比如 babel-register，還有 babel-runtime，各種 presets 的區別，transform-runtime 和 babel-polyfill 的區別，helpers 是干嘛的。盡管網上的 babel 的教程很多了，文檔也比較清楚，但是解答自己的一些疑問，還是要花一些功夫。所以抽出時間來總結一下。如果你對于以上概念已經比較清楚了，就不需要往下看了。

本次的 example 代碼都在 github 上，而且每個文件夾都有詳細的 README，說明我的使用方式。可以去參照一下用例的使用，并 clone 下來自己研究一下。

版本變化

說實話，從我做前端的時候，接觸 babel 的時候，就已經是 babel 6 了，但是這不妨礙了解一下它的重大版本變化。

上一個版本 babel 5 是全家桶，包括各種package， plugins，盡可能的想通過你的一次安裝，達到全能的效果。不過你現在安裝 npm install babel ，會得到一個 warning。babel 6 是 2015年10月30號發布，主要做了以下更新：

拆分成幾個核心包， babel-core , babel-node , babel-cli ...
沒有了默認的轉換，現在你需要手動的添加 plugin。也就是插件化
添加了 preset，也就是預置條件。
增加了 .babelrc 文件，方便自定義的配置。

差不多了，我感覺其他的也不需要了解了。

包

babel 里面有好多的包，所以必須搞清楚他們都是干嘛的，才能讓我們更好的使用這個工具。

babel-core

可以看做 babel 的編譯器。babel 的核心 api 都在這里面，比如 transform，主要都是處理轉碼的。它會把我們的 js 代碼，抽象成 ast，即 abstract syntax tree 的縮寫，是源代碼的抽象語法結構的樹狀表現形式。我們可以理解為，它定義的一種分析 js 語法的樹狀結構。也就是說 es6 的新語法，跟老語法是不一樣的，那我們怎么去定義這個語法呢。所以必須要先轉成 ast，去發現這個語法的 kind，分別做對應的處理，才能轉化成 es5.

主要 api：

var babel = require('babel-core');
var transform = babel.transform;

babel.transform(code: string, options?: Object)

transform("code", options) // => { code, map, ast }

babel.transformFile(filename: string, options?: Object, callback: Function)

var path = require('path');
var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ['env'],
  plugins: ['transform-runtime'],
}, function(err, result) {// { code, map, ast }
    console.log(result);
});

babel.transformFileSync(filename: string, options?: Object)

var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ['env'],
  plugins: ['transform-runtime'],
});
console.log(result, 'res');

babel.transformFromAst(ast: Object, code?: string, options?: Object)

反轉，你把 ast 傳入，解析為 code 代碼。

options

babel-cli

提供命令行運行 babel。也就是你可以 babel filename 去對文件轉碼。

安裝的話

npm install --save-dev babel-cli
npm isntall babel-cli -g</code></pre> 
  
使用對應就是 
  node_module/.bin/babel script.js --out-file script-compiled.js
babel script.js --out-file script-compiled.js</code></pre> 
  
具體使用還是看 官方文檔 吧，我就不搬文檔了。 
  babel-external-helpers 
  babel-cli 中的一個command，用來生成一段代碼，包含 babel 所有的 helper 函數。 
  首先我們需要了解什么是 helpers。babel 有很多幫助函數，例如 toArray函數， jsx轉化函數。這些函數是 babel transform 的時候用的，都放在 babel-helpers 這個包中。如果 babe 編譯的時候檢測到某個文件需要這些 helpers，在編譯成模塊的時候，會放到模塊的頂部。 
  像這樣 
  (function(module, exports, webpack_require) {
function _asyncToGenerator(fn) { return function () {  }; } // 模塊頂部定義 helper
// some code 
// async 語法已經被 transform-async-to-generator 轉化，再利用 helper 函數包裝，消費 generator。
const func = (() => {
  var _ref = _asyncToGenerator(function* () {
    console.log('begin');
    yield new Promise(function (resolve) {
      setTimeout(function () {
        resolve();
      }, 1000);
    });
    console.log('done');
  });
})
})</code></pre> 
  
但是如果多個文件都需要提供，會重復引用這些 helpers，會導致每一個模塊都定義一份，代碼冗余。所以 babel 提供了這個命令，用于生成一個包含了所有 helpers 的 js 文件，用于直接引用。然后再通過一個 plugin，去檢測全局下是否存在這個模塊，存在就不需要重新定義了。 
  使用： 
   
    執行 babel-external-helpers 生成 helpers.js 文件，
 node_modules/.bin/babel-external-helpers > helpers.js
 注意：示例代碼的包都是裝到項目中的，也就是本地。同樣你可以全局安裝直接執行。
  
    安裝 plugin
 npm install --save-dev babel-plugin-external-helpers
  
    然后在 babel 的配置文件加入
 {
  "plugins": ["external-helpers"]
}
  
    入口文件引入 helpers.js
 require('./helpers.js');
  
   
  這樣就可以啦，還是可以減少很多代碼量的。剛知道同學抓緊去優化啦... 
  babel-node 
  也是 babel-cli 下面的一個 command，主要是實現了 node 執行腳本和命令行寫代碼的能力。舉兩個栗子就清楚了。 
   
   執行腳本 
   
  node 環境肯定是不支持 jsx 的 
  // test.js
const React = require('react');
const elements = [1, 2, 3].map((item) => {
  return (
    <div>{item}</div>
  )
});
console.log(elements);</code></pre> 
  
執行 test.js，會報錯，不認識這個語法。 
  node test.js //報錯 
  但是使用 babel-node 就可以。 
  node_modules/.bin/babel-node --presets react test.js 
  --presets react 是參數，等同于 
  {
    "presets": ["react"]
} 
  執行正常。 
   
   node 命令行寫代碼 
   
  注意： 本文所有代碼示例，均在 node 版本 4.8.4 下執行。 
  寫個解構賦值的，直接運行 node，不支持。 
   
  運行 node_modules/.bin/babel-node --presets env 
   
  得到 a 的 value 是 1。 
  通過栗子基本已經介紹了 babel-node 的用法了，就是方便我們平常開發時候，寫一些腳本的。所以它不適用于生產環境。另外，babel-node 已經內置了 polyfill，并依賴 babel-register 來編譯腳本。好，那 babel-register 是什么呢 
  babel-register 
  npm install babel-register --save-dev 
  babel-node 可以通過它編譯代碼，可以了解到，它其實就是一個編譯器。我們同樣可以在代碼中引入它 require('babel-register') ，并通過 node 執行我們的代碼。 
  它的原理是通過改寫 node 本身的 require，添加鉤子，然后在 require 其他模塊的時候，就會觸發 babel 編譯。也就是你引入 require('babel-register') 的文件代碼，是不會被編譯的。只有通過 require 引入的其他代碼才會。我們是不是可以理解，babel-node 就是在內存中寫入一個臨時文件，在頂部引入 babel-register，然后再引入我們的腳本或者代碼？ 
  舉個栗子，還是 node 中執行 jsx，要通過 babel 編譯。我們可以把 jsx 的代碼 a.js 編譯完輸出到一個 b.js，然后 node b.js 也是可以執行的。但是太麻煩，不利于開發。讓我們看一下通過 register 怎么用： 
  // register.js 引入 babel-register，并配置。然后引入要執行代碼的入口文件
require('babel-register')({ presets: ['react'] });
require('./test') 
  // test.js 這個文件是 jsx...
const React = require('react');
const elements = [1, 2, 3].map((item) => {
  return (
    <div>{item}</div>
  )
});
console.log(elements); 
  // 執行
$ node register.js 
  它的特點就是實時編譯，不需要輸出文件，執行的時候再去編譯。所以它很適用于開發。總結一下就是，多用在 node 跑程序，做實時編譯用的，通常會結合其他插件作編譯器使用，比如 mocha 做測試的時候。 
  值得一提的是，babel-register 這個包之前是在 babel-core 下面的，所以也可以 require('babel-core/register') 去引入，跟 require('babel-register') 是一樣的。但是，babel 的團隊把 register 獨立出來了，而且未來的某一天（升 7.0）會從 babel-core 中廢除，所以我們現在最好還是使用 babel-register 吧。 babel-core/register.js 
  babel-runtime 
  npm install babel-runtime --save 
  這個包很簡單，就是引用了 core-js 和 regenerator，然后生產環境把它們編譯到 dist 目錄下，做了映射，供使用。那么什么是 core-js 和 regenerator 呢。 
  首先我們要知道上面提到的 babel-core 是對語法進行 transform 的，但是它不支持 build-ints（Eg: promise，Set，Map），prototype function（Eg: array.reduce,string.trim），class static function （Eg：Array.form，Object.assgin），regenerator （Eg：generator，async）等等拓展的編譯。所以才要用到 core-js 和 regenerator。 
  core-js 
  core-js 是用于 JavaScript 的組合式標準化庫，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 實現。也就是說，它幾乎包含了所有 JavaScript 最新標準的墊片。不過為什么它不把 generator 也實現了... :grin: 
  // 比如，只不過需要單個引用
require('core-js/array/reduce');
require('core-js/object/values'); 
  regenerator 
  它是來自于 非死book 的一個庫， 鏈接 。主要就是實現了 generator/yeild， async/await。 
  所以 babel-runtime 是單純的實現了 core-js 和 regenerator 引入和導出，比如這里是 filter 函數的定義，做了一個中轉并處理了 esModule 的兼容。 
  module.exports = { "default": require("core-js/library/fn/array/filter"), __esModule: true }; 
  helpers 
  還記得提 babel-external-helpers 的時候，介紹 helpers 了嗎。babel-runtime 里面的 helpers 就相當于我們上面通過 babel-external-helpers 生成的 helpers.js。只不過它把每個 helper 都單獨放到一個文件夾里。這樣，配合 transform-runtime 使用的時候，需要用 helper 轉化的時候，就從 babel-runtime 中直接引用了。 
  var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);</code></pre> 
  
文件結構： 
   
  使用 
  可以單獨引入 require('babel-runtime/core-js/object/values'); 
  不過這些模塊都做了 esModule 的兼容處理，也就是上面引入的模塊是 { "default": require("core-js/library/fn/array/filter"), __esModule: true } 這樣的，要使用還得加上 .default 。所以我們期待的是，最好能有幫我們自動處理的插件， babel-plugin-transform-runtime 就是用來做這個的。這個我們放到 plugin 去講。 
  babel-polyfill 
  npm install babel-polyfill --save 
  babel-runtime 已經是一堆 polyfill 了，為什么這里還有一個類似的包，它同樣是引用了 core-js 和 regenerator，墊片支持是一樣的。官網是這么說的，babel-polyfill 是為了模擬一個完整的ES2015 +環境，旨在用于應用程序而不是庫/工具。并且使用babel-node時，這個polyfill會自動加載（這個我們在介紹 babel-node 的最后已經說了）。 
  也就是說，它會讓我們程序的執行環境，模擬成完美支持 es6+ 的環境，畢竟無論是瀏覽器環境還是 node 環境對 es6+ 的支持都不一樣。它是以重載全局變量 （E.g: Promise）,還有原型和類上的靜態方法（E.g：Array.prototype.reduce/Array.form），從而達到對 es6+ 的支持。不同于 babel-runtime 的是，babel-polyfill 是一次性引入你的項目中的，就像是 React 包一樣，同項目代碼一起編譯到生產環境。 
  使用 
  我們結合 babel-register 去使用一下 
  // index.js
require('babel-core/register')({});
require('babel-polyfill');
require('./async'); 
  // async.js
async function a() {
  console.log('begin');
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000)
  })
  console.log('done');
}
a(); 
  $ node index.js 
  完美運行。 
  plugins 
  要說 plugins 就不得不提 babel 編譯的過程。babel 編譯分為三步： 
   
   parser：通過 babylon 解析成 AST。 
   transform[s]：All the plugins/presets ，進一步的做語法等自定義的轉譯，仍然是 AST。 
   generator： 最后通過 babel-generator 生成 output string。 
   
  所以 plugins 是在第二步加強轉譯的，所以假如我們自己寫個 plugin，應該就是對 ast 結構做一個遍歷，操作。 
  babel-plugin-transform-runtime 
  上面我們知道，transform-runtime 是為了方便使用 babel-runtime 的，它會分析我們的 ast 中，是否有引用 babel-rumtime 中的墊片（通過映射關系），如果有，就會在當前模塊頂部插入我們需要的墊片。試一下： 
  npm install babel-plugin-transform-runtime 
  // 編譯前
console.log(Object.values({ 1: 2 })); 
  node_modules/.bin/babel --plugins transform-runtime values.js 
  // 編譯后
'use strict';
var _values = require('babel-runtime/core-js/object/values');
var _values2 = _interopRequireDefault(_values);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
onsole.log((0, _values2.default)({ 1: 2 }));</code></pre> 
  
另外，它還有幾個配置 
  // 默認值
{
  "plugins": [
    ["transform-runtime", {
      "helpers": true,
      "polyfill": true,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
} 
  如果你只需要用 regenerator，不需要 core-js 里面的 polyfill 那你就可以在 options 中把 polyfill 設為 false。helpers 設為 false，就相當于沒有啟用 babel-plugin-external-helpers 的效果，比如翻譯 async 的時候，用到了 asyncToGenerator 函數，每個文件還會重新定義一下。moduleName 的話，就是用到的庫，你可以把 babel-runtime 換成其他類似的。 
  transform-runtime 對比 babel-polyfill 
  其實通過上面的介紹我們已經了解他們是干什么的了，這里再稍微總結區分一下吧。我在這里把 babel-runtime 和 babel-plugin-transform-runtime 統稱為 transform-runtime，因為一起用才比較好。 
   
   babel-polyfill 是當前環境注入這些 es6+ 標準的墊片，好處是引用一次，不再擔心兼容，而且它就是全局下的包，代碼的任何地方都可以使用。缺點也很明顯，它會污染原生的一些方法，polyfill 把原生的方法重寫了，如果當前項目已經有一個 polyfill 的包了，那你只能保留其一。而且一次性引入這么一個包，會大大增加體積。如果你只是用幾個特性，就沒必要了，如果你是開發較大的應用，而且會頻繁使用新特性并考慮兼容，那就直接引入吧。 
   transform-runtime 是利用 plugin 自動識別并替換代碼中的新特性，你不需要再引入，只需要裝好 babel-runtime 和 配好 plugin 就可以了。好處是按需替換，檢測到你需要哪個，就引入哪個 polyfill，如果只用了一部分，打包完的文件體積對比 babel-polyfill 會小很多。而且 transform-runtime 不會污染原生的對象，方法，也不會對其他 polyfill 產生影響。所以 transform-runtime 的方式更適合開發工具包，庫，一方面是體積夠小，另一方面是用戶（開發者）不會因為引用了我們的工具，包而污染了全局的原生方法，產生副作用，還是應該留給用戶自己去選擇。缺點是隨著應用的增大，相同的 polyfill 每個模塊都要做重復的工作（檢測，替換），雖然 polyfill 只是引用，編譯效率不夠高效。 
   
  另外，關于 babel-runtime 為什么是 dependencies 依賴。它只是一個集中了 polyfill 的 library，對應需要的 polyfill 都是要引入項目中，并跟項目代碼一起打包的。不過它不會都引入，你用了哪個，plugin 就給你 require 哪個。所以即使你最終項目只是 require('babel-runtime/core-js/object/values') 其中的一個文件，但是對于這包來說，也是生產依賴的。 
  presets 
  各種配置 plugin 實在是費勁，es6+ 編譯要加入好多 plugins，比如為了在 node 中使用 esmodule，要把 esmodule 轉化成 commomjs，使用 transform-es2015-modules-commonjs ，還有 asyncToGenerator，React jsx轉化等等，不僅要裝好多，還要配好多。 
  presets 就是 plugins 的組合，你也可以理解為是套餐... 主要有 
   
   env 
   es2015 
   react 
   lastet 
   stage-x 具體的語法屬于哪個 stage 可參照 tc39 
   
  大部分的 presets 我覺得都不需要介紹了，官網上寫的比較詳細。而且 babel-preset-lastet 已經廢棄，被 babel-preset-env 代替。 
  { "presets": ["latest"] } === { "presets": ["env"] } 
  babel-preset-env 
  這個 preset 真是神器啊，它能根據當前的運行環境，自動確定你需要的 plugins 和 polyfills。通過各個 es標準 feature 在不同瀏覽器以及 node 版本的支持情況，再去維護一個 feature 跟 plugins 之間的映射關系，最終確定需要的 plugins。 
  配置 
  詳情： 
  {
  "presets": [
    [
      "env",
      {
        "targets": { // 配支持的環境
          "browsers": [ // 瀏覽器
            "last 2 versions",
            "safari >= 7"
          ],
          "node": "current"
        },
        "modules": true,  //設置ES6 模塊轉譯的模塊格式 默認是 commonjs
        "debug": true, // debug，編譯的時候 console
        "useBuiltIns": false, // 是否開啟自動支持 polyfill
        "include": [], // 總是啟用哪些 plugins
        "exclude": []  // 強制不啟用哪些 plugins，用來防止某些插件被啟用
      }
    ]
  ]
} 
  主要介紹 debug 和 很好用的 useBuiltIns 吧。 
   
   開啟debug后，編譯結果會得到使用的 targets，plugins，polyfill 等信息 
   
  Using targets:
{
  "chrome": "59",
  "android": "4.4.3",
  "edge": "14",
  "firefox": "54",
  "ie": "10",
  "ios": "10",
  "safari": "7",
  "node": "4.8.4"
}
Modules transform: commonjs
Using plugins:
  check-es2015-constants {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  transform-es2015-arrow-functions {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"10","safari":"7"}
  transform-es2015-block-scoping {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  ...
Using polyfills:
  es6.typed.array-buffer {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  es6.typed.int8-array {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  es6.typed.uint8-array {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  es6.typed.uint8-clamped-array {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  es6.typed.int16-array {"android":"4.4.3","ie":"10","safari":"7","node":"4.8.4"}
  ...</code></pre> 
  
 
   useBuiltIns 
   
  env 會自動根據我們的運行環境，去判斷需要什么樣的 polyfill，所以我們不需要自己引入 babel-polyfill，或者是 babel-runtime 之類的了。而且，代碼體積也會大大減小，因為只會打包你需要的。強烈推薦... 
  配置 
  目前 babel 官方推薦是寫到 .babelrc 文件下，你還可以在 package.json 里面添加 babel 字段。不用配置文件的話，可以把配置當做參數傳給 babel-cli 
   
   .babelrc 
   
  {
  "presets": [
    "env"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": true,
      "polyfill": true,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
} 
   
   寫到 package.json 
   
  "babel": {
  "presets": [
    "env"
  ],
} 
   
   babel cli 
   
  babel script.js --plugins=transform-runtime --presets=env 
  配合其他工具 
  webpack 
  比較常用，除了 babel 自己的包，多裝一個 babel-loader 配合 webpack 使用。并在 webpack.config.js 中加入 loader 的配置 
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      }
    ]
  } 
  mocha 
  項目里的代碼都是用 es6+ 寫的，但是做單元測試的時候，測試框架并不認識你的什么 esModule，es6+ 的一些語法，mocha 是 node 程序，所以你要把 esModule 轉化成 commomjs 之類的。 
  mocha 是支持編譯器的，通過 --compilers 指定，這里我們用 babel，舉個栗子 
  // 求和函數 add.js
const add = (x, y) => x + y;
export default add;</code></pre> 
  
// 測試腳本 add.test.js
import { expect } from 'chai'; // chai 是斷言庫
import add from './add';
describe('es6 兩數相加', () => {
  it('2 + 4 = 6', () => {
    expect(add(2, 4)).equal(6);
  })
});</code></pre> 
  
./node_modules/mocha/bin/mocha --compilers js:babel-register add.test.js 
  因為 mocha 終究是在跑 node 程序的，適用于實時編譯，所以可以用 babel-register 做編譯器。 
  最后 
  總結這些東西花了我兩三天的時間，雖然搞清楚了這些包是干嘛的，但是又在想到底應不應該花時間研究這些，工具始終是用來使用的，對于 babel 來說更應該研究的是它對 ast 的處理方式？不過看到自己的產出，我覺得是有必要的，另外，因為對工具更進一步的了解，才能更好的在項目中使用它們。希望對你有所幫助。 
    
  來自：https://segmentfault.com/a/1190000011155061


                    
                         本文由用戶 zhuangxe 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1505371007046.html
                         Babel 前端技術

你真的會用 Babel 嗎?

引入

版本變化

包

babel-core

babel-cli

babel-register

babel-runtime

babel-polyfill

plugins

babel-plugin-transform-runtime

transform-runtime 對比 babel-polyfill

presets

babel-preset-env

配置

配合其他工具

webpack

mocha

最后

相關經驗

相關資訊

相關文檔

目錄