vue-cli脚手架的.babelrc文件
虽然es6还没被浏览器全部支持,但是使用es6是大势所趋,所以babel应运而生将es6代码转换成浏览器能够识别的代码
什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc
这个文件是用来设置转码的规则和插件
vue-cli脚手架的.babelrc文件
{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", {
"modules": false ,
"targets": {//需要支持的环境
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
// stage-x和es2015等有些类似,但是它是按照JavaScript的提案阶段区分的,一共有5个阶段。
//而数字越小,阶段越靠后,存在依赖关系。也就是说stage-0是包括stage-1的,以此类推。
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译,强烈推荐使用transform-runtime
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
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文件的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- vue-cli脚手架的.babelrc文件 详解
{ // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并 ...
随机推荐
- tcl之控制流-for
- Yii2 设计模式
一. 单例模式 顾名思义, 单例模式就是只实例一次,通过一个接口去实现多处需要的同一类对象的需求. 例子: public function __construct($config = []) { Yi ...
- Python全栈day 03
Python全栈day 03 一.运算符补充 in ,逻辑运算符,判断某字符或某字符串是否在一个大的字符串中,输出得到bool型数据. value = '我是中国人' v = '我' if v in ...
- strak组件(9):关键字搜索
效果图: 在列表视图函数增加搜索功能. 新增函数 def get_search_list(self) 钩子方法,获取搜索条件 一.strak组件 strak/service/core_func.py ...
- Educational Codeforces Round 43 E. Well played!(贪心)
E. Well played! time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- 4、spring boot 配置文件之profile
Profile 1.多Profile文件 我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml 默认使用application.prop ...
- MySQL CONCAT()与GROUP_CONCAT()的使用
1 . MySQL CONCAT(str1,str2, ...) --返回连接的字符串 mysql> SELECT CONCAT('My', 'S', 'QL'); -> 'MySQ ...
- User_Authentication_Personalization Model
花了一天时间实现了一个 简单的用户登录验证的小模型. 基本实现了现在 用户登录模块的绝大多数功能, 也算是 熟悉了一下系统的逻辑. 在这个小模型中, 实现了以下的基本功能 : Logging in a ...
- Java 泛型 二
一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...
- laravel5.5事件系统
目录 1 注册事件和监听器 2 定义事件 3 定义监听器 4 分发事件 更多使用方法 1. 可以手动注册事件 2. 事件监听器中调用队列 3.事件订阅者 1 注册事件和监听器 1.修改EventSer ...