vue-cli脚手架的.babelrc文件用法说明


Posted in Javascript onSeptember 11, 2020

虽然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 cli3 element-ui懒加载 按需加载ui组件

前言

vue cli3.x + UI框架 开发时,经常实际只用到的 UI框架 提供的几个组件,而每次我们是全部引入,这会照成程序需要消耗更多的资源,尤其是在移动端(例如使用 mint ui),在性能上会有更大的影响,照成不好的用户体验。

接下来记录以 vue cli3.x +element ui 为例实现按需加载组件。

未引入 element 插件时

vue-cli脚手架的.babelrc文件用法说明

引入 element ui(npm i element-ui -S)

如下图,可见 app.js 增加了 5M 的数据。

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

vue-cli脚手架的.babelrc文件用法说明

只引入 element 的部分组件

如下图,可见虽然我们只引用了两个组件,但是 app.js 的大小几乎不变,这样没有实现按需加载的效果。

import { Button, Select } from 'element-ui'
// 此时的样式必须要引入,否则组件将没有样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)
Vue.use(Select)

vue-cli脚手架的.babelrc文件用法说明

实现按需加载

1.安装插件 npm i babel-plugin-component -D

2.配置 babel.config.js

module.exports = {
 presets: [
  '@vue/app',
  ['@babel/preset-env', // 添加 babel-preset-env 配置
   {
    'modules': false
   }
  ]
 ],
 plugins: [
  [
   'component',
   {
    'libraryName': 'element-ui', // 按需引入的组件库
    'styleLibraryName': 'theme-chalk' // 按需引入的样式
   }
  ]
 ]
}

把 main.js 也修改下:

import { Button, Select } from 'element-ui'
// 此时的样式不需要引入了,样式自动按需来引入
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)
Vue.use(Select)

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

配置好后重新 npm run serve 下,此时的 app.js 相对于没有引入插件时只增加了几百 k 的大小,这样就实现了按需加载。

vue-cli脚手架的.babelrc文件用法说明

以上这篇vue-cli脚手架的.babelrc文件用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
JS自定义滚动条效果
Mar 13 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 #Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 #Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 #Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
JS获取html对象的几种方式介绍
2013/12/05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
解决Mac下使用python的坑
2019/08/13 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
电台实习生求职信
2014/02/25 职场文书
保护黄河倡议书
2014/05/16 职场文书
购房个人委托书范本
2014/10/11 职场文书
企业整改报告范文
2014/11/08 职场文书
2015入党个人自传范文
2015/06/26 职场文书
旅游安全责任协议书
2016/03/22 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
MySQL日期时间函数知识汇总
2022/03/17 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript