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配置/