前面的文章说到了react 15的一些特性,众所周知react搭配es6或者叫es2015的开发模式更加的方便快捷。不过提到es2015这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来,就少不了将未来将要被浏览器支持但现在支持还不全面的规范转换成现有规范的工具了。这个好像选择不多,是的好像就是babel了,关于babel,本文不会去涉及它内部的实现原理。因为最近在兼容新的react的时候,不可避免的涉及到babel的更新,开始被那一串配置搞的头大,所以就认真的学习了一下,来跟大家分享一下。这里的主要目的是babel的一些列配置文件的处理,所以关于babel的安装之类的请猛戳babel官网

  关于babel的配置,主要是体现在项目根目录下的.babelrc文件中。在babel6之前的版本还支持其他的一些配置选项,更新之后babel配置文件只支持presets,plugins两个参数。不向后兼容,所以其他的参数是会报类似下面的错误:

  ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)。

所以我们所有的配置都是基于上面两个参数上来配置的。两者差别可以认为presets指定的部分是babel集成好的插件集,可以用来应对某一类问题例如es2015就是用来解析es2015用到的插件集。当然可能会有某些情况是比较个例的,可能用到但大部分情况下不会出现的插件,你就可以在plugins中配置

  一、presets:babel已经集成好的插件集。包括以下六种:

  1)es2015: 处理es2015基本的语法,安装对应语句:

  npm install npm install --save-dev babel-preset-es2015

  2)react:主要用来处理react所用到的jsx语法等。安装:

  npm install npm install --save-dev babel-preset-react

  3)stage-0:主要处理do语句和bind方法。还包括stage-1,stage-2,stage-3的全部插件。 

 /**
*文档上这么说,
*但是实际中在stage-0的node_modules中可以发现只安装了前两个插件,
*而stage-1的node_modules中不仅包含自己的插件还包含stage-2的插件
*所以stage-1还是要安装的.
**/

安装:npm install npm install --save-dev babel-preset-stage-0

  4)stage-1:包含以下插件:

  下面这两种了解不深。。请大神指教。

  还包括stage-2中的插件:

  以及stage-3中的插件,用来处理generator函数和operator:

在babel的配置文件.babelrc中的配置写法如下:

  如果只配置前两项,你回发现你声明的static 属性,@装饰器模式都会报错。所以要依赖后两项,按文档的说法看来stage-0就可以了,不过实际中处理装饰器模式的插件还是没有的,依旧会报错。所以两者都要依赖。不过看最新babel的文档,已经拆分的比较细了,不再是前面的包括后面的,命名就是根据不同时期的语法规范来命名了不再是1,2,3了。而是统一es201X的方式了。此处线略过。

  二、plugins:前面也提到了,presets是预设的插件集,当然都是有个例的存在,如果你需要单独的某些插件的话,可以在这里配置。可能你会有疑问,前面presets看起来已经可以包含基本情况了吧,plugins还有用到的时候吗?肯定的说是有的,举个可能都会碰到的情况,

  当你升级的react 15时,react-hot-loader必须要升级到3.X版本的,这个时候的react-hot-loader就必须要作为插件的形式配置在.babelrc中了,而不是像原来那样写在webpack的loaders中。

  还有一种情况就是用到装饰者模式的同学,你还是要单独引入transform-decorators-legacy插件的。所以完整的适用于react 15的.babelrc的配置如下:

  以上就是我对babel配置的一点了解了,抛砖引玉,共同进步。参考文章:http://babeljs.io/docs/plugins/

babel 配置探究及错误解析的更多相关文章

  1. Babel 配置用法解析

    Babel 配置用法解析 刚复工的时候我司业务太多了,我已不记得我们连续作战了多少天,最近算是有时间可以学习学习我的babel大宝贝了,上周末看了下babel的一些核心模块以及babel的一些配置,今 ...

  2. Android开发之JNI(一)--HelloWorld及遇到的错误解析

    Android开发之JNI(一)--HelloWorld及遇到的错误解析 1.NDK环境搭建    參考http://blog.csdn.net/xiaoliouc/article/details/8 ...

  3. webpack4.0 babel配置遇到的问题

    babel配置 babel版本升级到8.x之后发现出现了很多问题.首先需要安装 "@babel/core": "^7.1.2", "@babel/pl ...

  4. 再提供一种解决Nginx文件类型错误解析漏洞的方法

    [文章作者:张宴 本文版本:v1.2 最后修改:2010.05.24 转载请注明原文链接:http://blog.zyan.cc/nginx_0day/] 注:2010年5月23日14:00前阅读本文 ...

  5. 配置MAVEN出现错误:java_home not found in your enviroment

    配置好maven后检测是否配置成功出现错误:java_home not found in your enviroment 找问题: 1.cmd--> path  看路径是否正确 2.cmd--& ...

  6. [Python Web]配置 nginx 遇到错误排查(初级)

    配置 nginx 遇到错误排查(初级) 系统版本:ubuntu 14.04,nginx 版本:nginx/1.4.6 (Ubuntu) 本文不是一步步搭建 nginx 的过程,而是我在使用 nginx ...

  7. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  8. 框架源码系列七:Spring源码学习之BeanDefinition源码学习(BeanDefinition、Annotation 方式配置的BeanDefinition的解析)

    一.BeanDefinition 1. bean定义都定义了什么? 2.BeanDefinition的继承体系  父类: AttributeAccessor: 可以在xml的bean定义里面加上DTD ...

  9. samba配置中常见错误收集.txt

    在命令行输入命令: ~$ smbclient -L \\127.0.0.1按要求输入密码后,提示出错:session setup failed: NT_STATUS_LOGON_FAILURE 这是因 ...

随机推荐

  1. vc++ mfc中拖动效果的实现 借助于CImageList

    拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...

  2. servlet service() for servlet jsp throws null pointer exception

    这么一件小事折腾了一个多小时,google也上不去,对百度我就不吐槽什么了,最后用bing查出了满意的结果.一般程序中不要显式把jsp.jar和servlet.jar放在Lib目录下,因为tomcat ...

  3. python之路-Mysql&&ORM

    1. 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以 ...

  4. js中自己实现each方法来遍历多维数组

  5. css中外边距合并

    最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;heig ...

  6. log4j相对路径找不到,处理方法

    http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral

  7. php的进制转换

    学习了php的进制转换,有很多的知识点,逻辑,也有最原始的笔算,但是我们还是习惯使用代码来实现进制的转换,进制的转换代码有如下:二进制(bin)八进制( oct)十进制( dec)十六进制( hex) ...

  8. JavaScript学习(一)—处理事件2

    下面的表中为最常用的 12 种 JavaScript 事件处理程序. 一.处理窗口事件(onload事件,onunload事件,onresize事件,onmove事件,onabort事件,onerro ...

  9. LDAP与禅道

    一:搭建禅道做测试  搭建过程参考http://www.cnblogs.com/hiyu/p/5841650.html 1):下载 ZenTaoPMS.Pro5.5.1.zbox_64.tar.gz ...

  10. robotium(及百度cafe)运行testcase之后程序挂起没有响应的原因调查及解决

    一.问题背景 刚开始用的是百度cafe搭建的框架,已经用了一些版本,最后的test版本在7.4的apk上能跑,但是在最新发布的7.5的版本上跑不了,直接提示nullPointer错误,通过打日志的方式 ...