首页 >web前端 >js教程 >在vue-cli中如何配置babel配置文件

在vue-cli中如何配置babel配置文件

亚连
亚连原创
2018-06-05 15:27:223317浏览

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。本文介绍vue-cli脚手架工具根目录的babelrc配置文件,感兴趣的朋友一起看看吧

本文介绍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指定的不同的环境变量,进行不同的编译操作。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细为你讲解Immutable及 React 中实践技巧

如何解决VUEX兼容IE上的报错问题(详细教程)

在Node.js中使用readline如何实现逐行读取、写入文件内容

以上是在vue-cli中如何配置babel配置文件的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn