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

什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc

这个文件是用来设置转码的规则和插件

vue-cli脚手架的.babelrc文件

  1. {
  2. // 此项指明,转码的规则
  3. "presets": [
  4. // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
  5. ["env", {
  6. "modules": false ,
  7. "targets": {//需要支持的环境
  8. "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  9. }
  10. }],
  11. // 下面这个是不同阶段出现的es语法,包含不同的转码插件
  12. // stage-x和es2015等有些类似,但是它是按照JavaScript的提案阶段区分的,一共有5个阶段。
  13. //而数字越小,阶段越靠后,存在依赖关系。也就是说stage-0是包括stage-1的,以此类推。
  14. "stage-2"
  15. ],
  16. // 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译,强烈推荐使用transform-runtime
  17. "plugins": ["transform-runtime"],
  18. // 下面指的是在生成的文件中,不产生注释
  19. "comments": false,
  20. // 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
  21. "env": {
  22. // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
  23. "test": {
  24. "presets": ["env", "stage-2"],
  25. // instanbul是一个用来测试转码后代码的工具
  26. "plugins": ["istanbul"]
  27. }
  28. }
  29. }

browserslist: Library to share supported browsers list between different front-end tools. It is used in:

  • Autoprefixer
  • babel-preset-env
  • eslint-plugin-compat
  • stylelint-no-unsupported-browser-features
  • postcss-normalize

vue-cli脚手架的.babelrc文件的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  6. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  7. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  8. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  9. vue-cli脚手架的.babelrc文件 详解

    { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并 ...

随机推荐

  1. Ansible学习 Playbooks_1

    Playbooks是Ansible中执行较复杂任务的一种的方式,Playbook由1个或多个play组成,语法格式是YAML,下面以一个简单的任务为例,开始我们的Playbook学习: 任务描述: 1 ...

  2. Redis ----------String的操作

    set    key   value 设置key对应的值为String类型的value mset    key   value 一次设置多个 key对应的值 mget    key   value 一 ...

  3. stark组件(11):组合搜索

    效果图: 新增函数和类 Option 获取字段的对象或元组 SearchGroupRow 封装数据,展示到前端 get_search_group 获取组合搜索的字段 get_search_group_ ...

  4. Windows Server 远程桌面连接不上问题解决

    关于Windows Server 远程桌面连接不上的问题需要从服务.端口.防火墙这几方面进行检查: 服务器上需要 开启的服务: - Remote Access Auto Connection Mana ...

  5. urllib使用一

    urllib.urlopen()方法: 参数: 1.url(要访问的网页链接http:或者是本地文件file:) 2.data(如果有,就会由GET方法变为POST方法,提交的数据格式必须是appli ...

  6. 3,Linux入门

    操作系统的分类 Windows系列操作系统,Unix类操作系统,Linux类操作系统,Mac操作系统 提问:为什么要去学习Linux? 同学甲可能要问,超哥你介绍了这么多有关Linux的知识,但我还是 ...

  7. CodeForces 522D Closest Equals 树状数组

    题意: 给出一个序列\(A\),有若干询问. 每次询问某个区间中值相等且距离最短的两个数,输出该距离,没有则输出-1. 分析: 令\(pre_i = max\{j| A_j = A_i, j < ...

  8. 网易考拉Android客户端网络模块设计

    本文来自网易云社区 作者:王鲁才 客户端开发中不可避免的需要接触到访问网络的需求,如何把访问网络模块设计的更具有扩展性是每一个移动开发者不得不面对的事情.现在有很多主流的网络请求处理框架,如Squar ...

  9. 程序员最值得听的歌曲TOP10

      No.10 一剪梅 费玉清 - 玉笛公子 <一剪梅>是1984年台湾同名电视剧的片头曲,原唱为林禹胜,经典版本由费玉清演唱,后又成为2009年霍建华.吕一主演电视剧<新一剪梅&g ...

  10. php静态文件返回304

    有时一些静态文件(如图片)会由php输出,会发现请求都是200,静态文件每次都去服务器上请求太浪费资源了,这时如何让浏览器缓存图片呢?就需要我们在php中输出304了. 我们可以利用php中的 HTT ...