babel入門基礎

背景

　　babel的官網說babel是下一代的js語法編譯器，如今本身也在不少項目中使用了babel，但是本身對babel的認識呢，只停留在從google和別人項目中copy的配置代碼上，心裏感到很不安，最近花了點時間整理了一下，分享給大夥。

babel經常使用配置

一般在前端或node項目中，進行如下配置：

入口文件app.babel.js裏面配置：

   

// babel
require('babel-core/register')({
	presets: ['es2015', 'stage-0']
});
require('babel-polyfill');

require('./app.js');

 

.babelrc文件中的設置：

 

{
  "presets": ["es2015", "stage-0"]
}

babel基礎概念

1.babel-core

　　新的js語法以前是不存在的，須要將js代碼分析抽象的語法樹 ，方便各個插件分析語法進行相應的處理成低版本的js；

 2.babel-register 

　　改寫了require命令，會對.js、jsx、.es、es6 後綴的模塊都會先轉碼，但並不會對當前文件進行轉碼；因爲該轉碼是實時的，因此不能用在生產環境中。

3.babelrc文件

　　babel-core只是生成了語法樹，並無轉碼，轉碼工做由插件完成。自從babel升級到6.x以後，babel的插件都是能夠插拔的，只有設置了相應的插件，babel才能知道如何處理js代碼。

　　.babelrc主要對presets、plugins進行設置，其中presets主要是一套預設置的插件，如es-201五、stage-0等，plugins可讓用戶選取須要的單個插件。

　　目前babel提供了幾個官方的preset，主要包括：env  es2015 es2016 es2017 flow latest react 。設置presets的時候須要提早npm安裝相應的插件，插件名格式：babel-preset-xxx；以下：

 

{   "presets": ["es2015"] }

npm install babel-preset-es2015

　　 

　　若是不須要一套plugins的預設置，能夠經過plugins屬性引入所需的plugin，好比如下的設置就會引入編譯class函數的功能。

 

{   "plugins": ["transform-es2015-classes"] }

　　

　　須要注意的是，某些插件是不被presets預置的，如經常使用的 transform-runtime 插件和 transform-remove-console 插件。

 

　　 關於presets和plugins的優先順序通常聽從3個原則：

• plugins優先於presets進行編譯。
• plugins按照數組的index增序(從數組第一個到最後一個)進行編譯。
• presets按照數組的index倒序(從數組最後一個到第一個)進行編譯。
• 詳細信息能夠查看 官方文檔

4.babel-polyfill 

　　polyfill擁有自定義的regenerator runtime 和core-js；它模擬了ES2015的環境，通常使用在應用程序中，而不是當作庫和工具使用；好比說babel-node中自帶了babel-polyfill，babel-polyfill爲node提供了ES6的REPL環境。REPL，即read-eval-print-loop交互式解釋器。詳情可參考 阮老師的文章。

　　babel幾乎能翻譯全部的js新語法，可是對於APIs卻並不是如此，如新增對象Promise、Set、Map等，靜態方法Object.assign等，這就須要創造一個ES6的運行環境。

能夠經過babel-polyfill來轉碼新API，其實現辦法就是向全局變量上掛新增的對象或在原型鏈上增長方法，如在node環境下將Promise掛在global對象上。缺點就是污染全局變量。

　　還有一個避免全局污染的方法就是使用babel-runtime + babel-plugins-runtime-transform；babel-runtime 更像是分散的polyfill 模塊，咱們能夠在本身的模塊裏單獨引入，好比 require(‘babel-runtime/core-js/promise’) ，它們不會在全局環境添加未實現的方法，只是這樣手動引用每一個 polyfill 會很是麻煩。咱們藉助 Runtime transform 插件來自動化處理這一切。

webpack中如何使用babel

1.使用babel-runtime

須要安裝babel-runtime和babel-plugin-transform-runtime

 

module: {
    loaders: [{
     loader: 'babel',
     test: /\.js/,
     include: path.join(__dirname, 'src'), 
    query: {
       plugins: ['transform-runtime'], 
       presets: [ 'es2015', 'stage-0'],
     }}]
 }

 

2.使用babel-polyfi

將babel-polyfill放在入口設置處

entry: [ 'babel-polyfill','src/index.js', ], 
module: {   
    loaders: [{
         loader: 'babel',
         test: /\.js/,
         include: path.join(__dirname, 'src'),
         query: {
             presets: ['es2015',  'stage-0']
        }}]
 }
        

　　

參考資料：

http://www.tuicool.com/articles/vmA3U3R

http://www.javashuo.com/article/p-nqrmmrmg-h.html

https://github.com/brunoyang/blog/issues/20