vue-cli中的babel配置文件.babelrc实例详解


Posted in Javascript onFebruary 22, 2018

本文介绍vue-cli脚手架工具根目录的babelrc配置文件

介绍

es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码

babel有提供专门的命令行工具方便转码,可以自行去了解

vue-cli脚手架的.babelrc文件

{
 // 此项指明,转码的规则
 "presets": [
 // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
 ["env", { "modules": false }],
 // 下面这个是不同阶段出现的es语法,包含不同的转码插件
 "stage-2"
 ],
 // 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
 "plugins": ["transform-runtime"],
 // 下面指的是在生成的文件中,不产生注释
 "comments": false,
 // 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
 "env": {
 // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
 "test": {
  "presets": ["env", "stage-2"],
  // instanbul是一个用来测试转码后代码的工具
  "plugins": ["istanbul"]
 }
 }
}

ps:下面给大家介绍关于.babelrc配置文件

关于react项目结构,有很多配置文件,有时候觉得很难理解。

比如.babelrc文件,这个文件是用来设置转码的规则和插件的。

熟悉linux的话一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等。在babel6中,这个文件必不可少。
里面可以对babel命令进行配置,以后再使用babel的cli的时候,可以少一些配置。还有一个env字段,可以对BABEL_ENV或者NODE_ENV指定的不同的环境变量,进行不同的编译操作。

总结

以上所述是小编给大家介绍的vue-cli中的babel配置文件.babelrc实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
vue请求数据的三种方式
Mar 04 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 #Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 #Javascript
babel之配置文件.babelrc入门详解
Feb 22 #Javascript
javascript填充默认头像方法
Feb 22 #Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 #Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 #Javascript
node内置调试方法总结
Feb 22 #Javascript
You might like
PHP 第二节 数据类型之数组
2012/04/28 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js实现拖拽效果
2015/02/12 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
电子信息专业自荐书
2014/02/04 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
预备党员个人总结
2015/02/14 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL