繁琐的配置?

你能快速读懂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. LeetCode-054-螺旋矩阵

    螺旋矩阵 题目描述:给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...

  2. Visual Studio快捷技能

    一.移动光标

  3. phpstorm xdebug 断点测试

    参考博客: https://blog.csdn.net/J2778322217/article/details/123111960?spm=1001.2014.3001.5502 https://no ...

  4. Higncharts 制作

    <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程 ...

  5. PHP读取.cer文件解析公钥证书.pfx证书

    php读取.cer文件 $certificateCAcerContent = file_get_contents($filePath); $certificateCApemContent = '--- ...

  6. tp5三级联动的实现

    tp5三级联动的实现 首先注意这里 如果说一级菜单不选中的话 后边的二级菜单是没有数据的 这里就要用到三级联动 第一步:先把一级菜单的数据查询展示出来 所以 pid 默认等于 0 代码实例: publ ...

  7. Lua在Nginx的应用

    当 Nginx 标准模块和配置不能灵活地适应系统要求时,就可以考虑使用 Lua 扩展和定制 Nginx 服务.OpenResty集成了大量精良的 Lua 库.第三方模块,可以方便地搭建能够处理超高并发 ...

  8. 字节一面:go的协程相比线程,轻量在哪?

    1. 用户态和内核态 Linux整个体系分为用户态和内核态(或者叫用户空间和内核空间), 那内核态究竟是什么呢? 本质上我们所说的内核态, 它是一种特殊的软件程序,特殊在哪? 统筹计算机的硬件资源,例 ...

  9. MySQL优化之索引解析

    索引的本质 MySQL索引或者说其他关系型数据库的索引的本质就只有一句话,以空间换时间. 索引的作用 索引关系型数据库为了加速对表中行数据检索的(磁盘存储的)数据结构 索引的分类 数据结构上面的分类 ...

  10. Kubernetes系列(一)Pod

    作者: LemonNan 原文地址: https://juejin.im/post/6862733649272537102 简单介绍 Pod 在 kubernetes 中是一个非常重要的基本概念, 别 ...