前端系列——快速理解babel6配置过程
繁琐的配置?
你能快速读懂babel的官方文档吗?
你能根据官方文档快速配置好babelrc吗?
你能明白自己需要哪些插件吗?
没有搞明白这3个问题,请往下看。
快速理解babel 6
来看一张让人颤抖的babel插件图
下图仅仅截取了部分,一屏都截取不完,还有babel插件隐藏在下面,你害怕了吗?
忘记上面的图吧,那是罪恶之源
当你忘记一切的时候,你只需要理解几个基本的东西即可。
只需要下面几个babel插件,就能解析大部分ES方法
1、babel-core //必备的核心库
2、babel-loader //webpack loader配置必备
3、babel-preset-env //有了它,你不再需要添加2015、2016、2017,全都支持
4、babel-preset-stage-0 //有了它,你不再需要添加stage-1,stage-2,stage-3,默认向后支持
5、babel-plugin-transform-runtime
6、babel-runtime //5和6是一起使用的,支持helpers,polyfill,regenerator配置
上面6大插件添加到package.json,便可完成一个普通开发者的需求了,那么,如果是个react开发者,则还需要添加下面几个插件
1、babel-plugin-transform-decorators-legacy //支持修饰符语法 @connect
2、babel-preset-react //支持解析react语法
如果你想要支持热更新呢,还需要一个插件
1、react-hot-loader //虽然它长得不像babel,但是它也需要在babelrc做配置
其他插件呢?
从我的感受来看,上面这几个插件的集合已经覆盖了大部分ES语法了,如果是vue开发者,则把react的替换成vue。通常我们不再需要考虑其他插件。
这些插件的具体版本号
请注意,babel插件一直在更新,至今已经出了babel7。而本章内容是介绍babel6,请不要乱用版本。
下面提供具体的版本号给大家参考
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"react-hot-loader": "^3.1.2",
你相信吗?上面9个插件,就能生成图片上那几十个插件,这一切归功于插件之间的依赖关系。
babelrc配置
现在,你只要考虑上面列举的插件以及版本号,就能把babel快速配置出来了,相当简单
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
["transform-runtime", {
"helpers": false, //建议为false
"polyfill": false, //是否开始polyfill,根据你的网站兼容性情况来看,通常我不开启,开启会增加很多额外的代码
"regenerator": true //必须true,否则js就废了
}],
"react-hot-loader/babel", //热更新插件
"transform-decorators-legacy" //修饰符语法转换插件
]
}
webpack loader配置
babel-loader配置也相当简单,至于react-hot-loader在webpack中的配置,请自行查看文档。
module: {
rules: [{
test: /\.jsx?$/,
use: 'babel-loader'
}]
}
总结
我始终相信,一个好的工程,应该尽量用简单的代码去解决简单的事情,而不是用复杂的代码去解决简单的事情。
很多人,包括我自己,在以前也经常被babel和webpack的配置搞的焦头烂额,特别是babel,经常报这个插件的错、那个插件的错,有时候不知道少了什么插件。
好了,现在不害怕了,因为babel配置原来如此的简单。
本文转载于:猿2048➱https://www.mk2048.com/blog/blog.php?id=h1hcij211ib
前端系列——快速理解babel6配置过程的更多相关文章
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- [后端人员耍前端系列]Bootstrap篇:30分钟快速掌握Bootstrap
一.引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面.比如一些前端框架和组件.还有移动开发React-Native.以及对.NET框架设计的一些重新认识.这些内容在接下来的时间都会 ...
- vue 快速入门 系列 —— Vue 实例的初始化过程
其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...
- 快速理解高性能HTTP服务端的负载均衡技术原理(转)
1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...
- 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
- 字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8
原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...
- Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)
Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...
- STM32CubeMX新建工程+基本IO配置过程
Ⅰ.写在前面 学习本文之前可以查看我前面的文章: STM32CubeMX介绍.下载与安装 STM32CubeMX使用方法及功能介绍 本文接着上一篇文章结合基本IO配置实例,讲述关于STM32CubeM ...
随机推荐
- MySQL:输入密码后闪退的解决方法
原因:MySQL服务没有启动 解决方法:在 "服务" 中启动MySQL
- 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课
开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...
- Java 代码注意细节
代码优化的目标是: 1.减小代码的体积 2.提高代码运行的效率 代码优化细节 1.尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final ...
- 阿里一面,说说你对Mysql死锁的理解
又到了金三银四的时候,大家都按耐不住内心的躁动,我在这里给大家分享下之前面试中遇到的一个知识点(死锁问题),如有不足,欢迎大佬们指点指点. 1.什么是死锁? 死锁指的是在两个或两个以上不同的进程或线程 ...
- 女朋友问我深浅copy到底是什么?
深浅拷贝 列表存放值的时候,是先申请一块内存空间,存放索引和内存地址的对应关系,其实通俗的来说列表内不存真正的值,是一种间接存放的对应关系: 列表内存不可变类型的数据 就比如说,如果现在将L列表索引0 ...
- Django基础必会
Django基础必会 Django项目目录 mysite -mysite -__init__.py -urls.py(函数和函数的对应关系) -settings.py(Django项目的配置信息) - ...
- VMware Workstation网络修改vlan id值
我们捣鼓虚拟机时,有时候网卡是需要承载多个vlan的,比如说部署fuel时网卡3需要承载私有,管理,存储网络的流量. 在virtualbox中我们可以直接在混杂模式项选择全部允许,但是在VMware ...
- linux的文件与目录的权限设置
@font-face { font-family: 宋体 } @font-face { font-family: "Cambria Math" } @font-face { fon ...
- 配置文件 /etc/profile出错导致ls,vi不能用
配置文件 /etc/profile出错导致ls,vi不能用 关于 Linux 的配置文件 /etc/profile 路径出错后相关的命令失效解决方式(如:ls,vi不能用) 一般我记得vi是在 ...
- 超硬核解析!Apache Hudi灵活的Payload机制
Apache Hudi 的Payload是一种可扩展的数据处理机制,通过不同的Payload我们可以实现复杂场景的定制化数据写入方式,大大增加了数据处理的灵活性.Hudi Payload在写入和读取H ...