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