babel 配置探究及错误解析

众所周知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的全部插件。 

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

安装: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配置的一点了解了,抛砖引玉,共同进步。

时间: 2024-10-15 07:39:39

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

babel 配置探究

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

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

[文章作者:张宴 本文版本:v1.2 最后修改:2010.05.24 转载请注明原文链接:http://blog.zyan.cc/nginx_0day/] 注:2010年5月23日14:00前阅读本文的朋友,请按目前v1.1版本的最新配置进行设置. 昨日,80Sec 爆出Nginx具有严重的0day漏洞,详见<Nginx文件类型错误解析漏洞>.只要用户拥有上传图片权限的Nginx+PHP服务器,就有被入侵的可能. 其实此漏洞并不是Nginx的漏洞,而是PHP PATH_INFO的漏洞,详见:h

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

Android开发之JNI(一)--HelloWorld及遇到的错误解析 1.NDK环境搭建 參考http://blog.csdn.net/xiaoliouc/article/details/8705560 2.HelloWorld编写 (1)新建一个AndroidprojectJniDemo,这个名字能够随便起. (2)新建一个HelloWorld.java类,里面的内容例如以下: public class HelloWorld { public native String print();

Linux-dns基础知识和BIND的简单配置-2(正向解析和反向解析)

DNS服务器基本配置 bind详解:包名:bind进程:named协议:dns使用端口:53(tcp,udp)相关包:bind-chroot:将named进程的活动范围限定在chroot目录,保证安全性.bind-devel:与开发相关的头文件和库文件(编译安装bind时所需)bind-libs:bind服务器端和客户端都使用到的公共库文件bind-utils : bind客户端工具程序文件:/usr/sbin/namedbind权限相关:安装完named会自动创建用户named系统用户,nam

WSL下使用VcXsrv启动chromium browser及常见错误解析 (ubuntu18.04, 图形界面)

先说结论,解决方法在最后: 启动浏览器实质是启动图形界面,推广到其他GUI程序同样适用. 目前在WSL环境下通过VcXsrv这个X server启动图形界面相对简单,但仍存在兼容性问题,配置仍需完善. 环境: win10系统安装ubuntu18.04的命令行工具(通过Microsoft Store安装) 背景: 正在阅读headfirst C(即嗨翻C语言)的P445,涉及以下关于不同系统启动特定浏览器的代码,用于启动特定浏览器: void open_url(char *url) { char

Webpack 踩坑系列之babel 配置

webpack 4.20.2 ,对于babel 配置 正确配置 错误配置 presets 要配置成跟@babel-core,对应的版本 原文地址:https://www.cnblogs.com/ghost-monkey/p/9716051.html

Struts2+hibernate 配置环境 架包解析

hibernate 配置需要jar的注释. antlr -2.7.6.jar   //一个语言转换工具,没有此包,hibernate不会执行hql语句,hibernate用它实现hql到sql的转换模板相关操作需要包. asm.jar  //asm是小巧轻便的java字节码操控框架,它能方便地生成和改造java代码.hibernate和spring在底层叠 都用到了 asm. asm-attrs.jar//ASM字节码库,如果使用cglib则必要 ehcache-1.2.jar//如果想使用缓存

配置Spring Security 错误:Property or field &#39;ROLE_USER&#39; cannot be found

在学习http://www.mkyong.com/spring-security/spring-security-hello-world-example/时,出现以下错误: Property or field 'ROLE_USER' cannot be found on object of type 'org.springframework.security.web.access.expression. 经查发现把 <security:http auto-config="true"

日积月累:配置SDK路径错误(An error occurred while automatically activating bundle com.android.ide.eclipse.adt)

在进行Android应用的开发过程中,有时候在配置SDK路径的时候(Windows->Preferences->Android),会出现如下报错:An error occurred while automatically activating bundle com.android.ide.eclipse.adt.并且重启Eclipse也没用.  注:该图为正常情况. 搜索相关资料,找到如下处理办法: 命令行到eclipse路径: 运行:eclipse.exe -clean: 日积月累:配置SD