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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
基于datagrid框架的查询
Apr 08 Javascript
JS中数组重排序方法
Nov 11 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
js实现计算器功能
Aug 10 Javascript
JavaScript流程控制(分支)
Dec 06 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php分页函数完整实例代码
2014/09/22 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
再论Javascript的类继承
2011/03/05 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
中止javascript执行的方法
2014/02/14 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
中学教师请假制度
2014/02/03 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
教师工作表现评语
2014/12/31 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
店长岗位职责
2015/02/11 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
捐款仪式主持词
2015/07/04 职场文书