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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
loading动画特效小结
Jan 22 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
vue中的scope使用详解
2017/10/29 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python基于template实现字符串替换
2020/11/27 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python