babel-loader配置
Posted 老街_hehe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
以上是关于babel-loader配置的主要内容,如果未能解决你的问题,请参考以下文章
配置 webpack babel-loader 与在 package.json 中配置有啥区别?
如何在使用vue-cli设置时从babel-loader中排除特定文件?