babel-loader配置

babel-loader配置（利用babel-loader等包實現es6轉es5語法）

安裝

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

npm 從npm@3之后不贊成自動安裝devDependencies,所有必須在package.json里明確指定babel-core這樣的宿主依賴。

 devDependencies字段，主要用來共插件指定其所需要的主軟件的版本。

使用（有兩種用法）

第一種：指定query屬性

在webpack.config.js里配置是比較推薦的方式：

第二種：查詢字符串的方式

babel-loader還支持以下選項：

cacheDirectory:默認值是false。如果設置了這個參數，被轉換的結果將會被緩存起來。

　　　　　　　當webpack再次編譯時，將會首先嘗試從緩存中讀取轉換結果，以此避免資源浪費。

　　　　　　　如果該值為空(loader:'babel-loader?cacheDirectory'),loader會使用系統默認的臨時文件目錄

問題及優化

性能問題

1.確保只轉換盡可能少的文件，你可能匹配了過多的文件類型，或者匹配了所有的‘.js’文件，你需要使用

 exclude:/(node_modules|bower_components)/    //排除部分目錄

2.設置cacheDirectory參數也可以讓你的loader性能提升2倍　

babel 給每個需要的文件注入helper擴展

您可以改為要求babel作為一個獨立運行的模塊，以避免重復。

下面的配置通過babel-plugin-transform-runtime插件可以禁用babel向每個文件注入helper

query:{
      presets:['es2015'],
      plugins : ['transform-runtime']
      }

需要先安裝插件 npm install babel-plugin-transform-runtime --save

• 本文鏈接： http://robin-front.github.io/2016/04/08/babel-loader配置/