babel-loader配置_我的使用（僅供參考）

Babel-loader介紹

Babel 把用最新標準編寫的 JavaScript 代碼向下編譯成能夠在今天隨處可用的版本。 這一過程叫作「源碼到源碼」編譯， 也被稱爲轉換編譯。

安裝

npm i babel-loader -D

package.json 配置文件

"babel-core": "^6.26.0",   // 核心包
    "babel-loader": "^7.1.2",   // 基礎包
    
    "babel-preset-env": "^1.6.1",  // 根據配置轉換成瀏覽器支持的 es5  
    
    "babel-plugin-transform-runtime": "^6.23.0",  //promise的轉換
    "babel-preset-react": "^6.24.1", //react語法的轉換
    "babel-plugin-import": "^1.6.3",  // import的轉換 
    
    "babel-preset-stage-0": "^6.24.1", //babel-preset-stage-0 打包處於 strawman 階段的語法）

接下來 我詳細解釋一下這些配置的做用：

babel-loader的配置

• .babelrc

  在咱們告訴 Babel 該作什麼以前，你須要作的就是在項目的根路徑下建立 .babelrc 文件。而後輸入如下內容做爲開始：

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

• babel-preset-env

  若是使用babel-preset-es2015,es2016,es2017包含了過多在某些狀況下不須要的功能.
  但使用babel-preset-env, 咱們能夠聲明環境, 而後該preset就會只編譯包含咱們所聲明環境缺乏的特性的代碼，所以也是比較推薦的方式。

  1. 安裝babel-preset-env

     npm i babel-preset-env

  2. 添加配置

     {
       "presets": ["env"]
     }

  3. 指定所要支持的瀏覽器

     • 指定支持主流瀏覽器最新的兩個版本以及IE 7+:

       "presets": [
            [
              "env",
              {
                "targets": {
                  "browsers": ["last 2 versions", "ie >= 7"]
                 }
              }
            ]
        ]

     • 支持超過市場份額5%的瀏覽器:

       "targets": {
             "browsers": "> 5%"
           }

     • 某個固定版本的瀏覽器:

       "targets": {
             "chrome": 56
           }

更多配置參考官方文檔：

• babel-preset-stage-x
  官方預設(preset), 有兩種，一個是按年份(babel-preset-2017)，一個是按階段(babel-preset-stage-0)。 這主要是根據TC39 委員會ECMASCRPIT 發佈流程來制定的。TC39 委員會決定，從2016年開始，每一年都會發佈一個版本，它包括每一年期限內完成的全部功能，同時ECMAScript的版本號也按年份編制，就有了ES2016, ES2017。因此也就有了babel-present-2016, babel-preset-2017， 對每年新增的語法進行轉化。babel-preset-latest 就是把全部es2015, es2016, es2017 所有包含在一塊兒了。

  最終在階段 4 被標準正式採納。
  如下是4 個不一樣階段的（打包的）預設：

  babel-preset-stage-0
  
  babel-preset-stage-1
  
  babel-preset-stage-2
  
  babel-preset-stage-3

  注意 stage-4 預設是不存在的由於它就是上面的 es2017 預設。

  以上每種預設都依賴於緊隨的後期階段預設，數字越小，階段越靠後，存在依賴關係。也就是說stage-0是包括stage-1的，以此類推。也就是說這些stage包含的特性是比latest更新的特性但還未被寫入標準進行發佈。

  使用的時候只須要安裝你想要的階段就能夠了：

  $ npm install --save-dev babel-preset-stage-2

  而後添加進你的 .babelrc 配置文件。可是要注意若是沒有提供es2017相關的預設，preset-stage-X 這種階段性的預設也不能用。

• babel-runtime
  babel-polyfill解決了Babel不轉換新API的問題，可是直接在代碼中插入幫助函數，會致使污染了全局環境，而且不一樣的代碼文件中包含重複的代碼，致使編譯後的代碼體積變大。 （好比：上述的幫助函數_defineProperty有可能在不少的代碼模塊文件中都會被插入）
  Babel爲了解決這個問題，提供了單獨的包babel-runtime用以提供編譯模塊的工具函數， 啓用插件babel-plugin-transform-runtime後，Babel就會使用babel-runtime下的工具函數，上述的代碼就會變成這樣

與 babel-polyfill 同樣，babel-runtime 的做用也是模擬 ES2015 環境。只不過，babel-polyfill 是針對全局環境的，引入它，咱們的瀏覽器就好像具有了規範裏定義的完整的特性 – 雖然原生並未實現。

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

經過安裝 babel-plugin-transform-runtime 和 babel-runtime 來開始。
```
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
```
而後更新 .babelrc：
```
      {
        "plugins": [
          "transform-runtime"
        ]
      }
```

webpack 中定義 babel-loader

不多有大型項目僅僅須要 babel，通常都是 babel 配合着 webpack 或 glup 等編譯工具一塊兒上的。
爲了顯出 babel 的能耐，我的配用 babel-runtime 、支持 react 的webpack.config.js
先來配使用 babel-runtime 的：
首先安裝：

npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime  babel-plugin-react-transform webpack --save-dev

npm install babel-runtime --save

而後配置:

module: {
  loaders: [{
    loader: 'babel',
    test: /\.jsx?$/,
    include: path.join(__dirname, 'src'),
    query: {
      plugins: ['transform-runtime'],
      presets: [
        ["env", {
          "targets": {
            "chrome": 52
          },
          "modules": false,
          "loose": true
        }],
        'stage-2',
        'react'
      ],
    }
  }]
}

babel-cli

abel 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。
讓咱們先全局安裝它來學習基礎知識。

$ npm install --global babel-cli

咱們能夠這樣來編譯咱們的第一個文件：

$ babel my-file.js

這將把編譯後的結果直接輸出至終端。使用 --out-file 或着 -o 能夠將結果寫入到指定的文件。

$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js

若是咱們想要把一個目錄整個編譯成一個新的目錄，可使用 --out-dir 或者 -d。.

$ babel src --out-dir lib
# 或
$ babel src -d lib

參考文章

《https://segmentfault.com/a/11...》