繁琐的配置?

你能快速读懂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配置过程的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  3. [后端人员耍前端系列]Bootstrap篇:30分钟快速掌握Bootstrap

    一.引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面.比如一些前端框架和组件.还有移动开发React-Native.以及对.NET框架设计的一些重新认识.这些内容在接下来的时间都会 ...

  4. vue 快速入门 系列 —— Vue 实例的初始化过程

    其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...

  5. 快速理解高性能HTTP服务端的负载均衡技术原理(转)

    1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...

  6. 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  7. 字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8

    原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...

  8. Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)

    Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...

  9. STM32CubeMX新建工程+基本IO配置过程

    Ⅰ.写在前面 学习本文之前可以查看我前面的文章: STM32CubeMX介绍.下载与安装 STM32CubeMX使用方法及功能介绍 本文接着上一篇文章结合基本IO配置实例,讲述关于STM32CubeM ...

随机推荐

  1. windows下CMD常用命令(url链接)

    https://blog.csdn.net/LJFPHP/article/details/78818696

  2. vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

    出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R ...

  3. 【python画圆】pip安装库时出现Read timed out.解决办法

    昨天第一次用python画圆,当时并没有安装numpy库(导入数据包)和matplotlib库(导入图形包),于是尝试用pip安装库 首先,我先更新了pip,如下图: 顺便附上成功截图: 然后安装nu ...

  4. 面试官:Java中对象都存放在堆中吗?你知道逃逸分析?

    面试官:Java虚拟机的内存分为哪几个区域? 我(微笑着):程序计数器.虚拟机栈.本地方法栈.堆.方法区 面试官:对象一般存放在哪个区域? 我:堆. 面试官:对象都存放在堆中吗? 我:是的. 面试官: ...

  5. 微信小程序结合 tp实现秒杀

    一:建表 1:用户表 2:订单表 3:收货地址 4:秒杀的商品表: 二: 微信后台方法 1 /** 2 * 秒杀接口 3 */ 4 public function seckill(Request $r ...

  6. Cocoapods插件机制浅析

    原文链接 背景 虽然做iOS开发的过程中使用过 Cocoapods, 但是对里面的细节了解其实不算太多,直到这两年做织女项目时,通过对Cocoapods进行Qt支持改造才开始深入了解部分细节,这个过程 ...

  7. 『德不孤』Pytest框架 — 14、Pytest中的conftest.py文件

    目录 1.conftest.py文件介绍 2.conftest.py的注意事项 3.conftest.py的使用 4.不同位置conftest.py文件的优先级 5.conftest.py中Fixtu ...

  8. python基础之序列类型的方法——字符串方法

    python基础之序列类型的方法--字符串方法 Hello大家好,我是python学习者小杨同学,经过一段时间的沉淀(其实是偷懒不想更新),我终于想起了自己的博客账号,所以这次带来的是序列方法的后半部 ...

  9. NoSQL:Redis缓存、雪崩、击穿、穿透

    Redis介绍 Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库 ...

  10. springcloud学习03-spring cloud eureka(下)

    7.配置服务提供者(生产者) 7.1.配置resources/application.yml. 值eureka.client.service-url(或serviceUrl).defaultZone是 ...