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

 更新时间:2018年02月22日 11:41:43   作者:qz奔跑的马  
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指定的不同的环境变量,进行不同的编译操作。

总结

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

相关文章

  • 在Vue3中使用localStorage保存数据的流程步骤

    在Vue3中使用localStorage保存数据的流程步骤

    在前端开发中,尤其是利用Vue3构建现代Web应用时,掌握如何使用本地存储(localStorage)来保存数据是非常重要的能力,在这篇博客中,我将详细介绍如何在Vue3中使用localStorage保存数据,并提供示例代码来帮助理解,需要的朋友可以参考下
    2024-06-06
  • vue-cli3使用mock数据的方法分析

    vue-cli3使用mock数据的方法分析

    这篇文章主要介绍了vue-cli3使用mock数据的方法,结合实例形式分析了vue-cli3使用mock数据的相关实现方法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • vue 中自定义指令改变data中的值

    vue 中自定义指令改变data中的值

    这篇文章主要介绍了vue 中自定义指令改变data中的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Vue使用echarts绘制柱状图和折线图

    Vue使用echarts绘制柱状图和折线图

    这篇文章主要为大家学习介绍了Vue如何使用echarts绘制柱状图和折线图,文中有详细的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • 纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)

    纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)

    vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • Vue2.x中的父子组件相互通信的实现方法

    Vue2.x中的父子组件相互通信的实现方法

    这篇文章主要介绍了Vue2.x中的父子组件相互通信,需要的朋友可以参考下
    2017-05-05
  • van-dialog弹窗异步关闭功能-校验表单实现

    van-dialog弹窗异步关闭功能-校验表单实现

    有时候我们需要通过弹窗去处理表单数据,在原生微信小程序配合vant组件中有多种方式实现,其中UI美观度最高的就是通过van-dialog嵌套表单实现,这篇文章主要介绍了van-dialog弹窗异步关闭-校验表单,需要的朋友可以参考下
    2023-11-11
  • VUE项目实现主题切换的多种方法

    VUE项目实现主题切换的多种方法

    这篇文章主要介绍了VUE项目实现主题切换的方法,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue的代理配置pathRewrite重写不生效问题及解决

    vue的代理配置pathRewrite重写不生效问题及解决

    这篇文章主要介绍了vue的代理配置pathRewrite重写不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现input框禁止输入标签

    vue实现input框禁止输入标签

    这篇文章主要介绍了vue实现input框禁止输入标签,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论