码迷,mamicode.com
首页 > 其他好文 > 详细

babel-loader配置

时间:2017-07-04 14:38:39      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:com   dir   运行   使用   webp   loader   插件   strong   eset   

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

 

babel-loader配置

标签:com   dir   运行   使用   webp   loader   插件   strong   eset   

原文地址:http://www.cnblogs.com/old-street-hehe/p/7116215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!