babel之配置文件.babelrc入门详解
介绍
es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码
babel有提供专门的命令行工具方便转码,可以自行去了解
什么是Babel
官方解释,是下一代JavaScript 语法的编译器。
既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调的编写机制,减轻了代码维护成本。
Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。在项目工程脚手架中,一般会使用.babelrc文件,通过配置一些参数配合webpack进行打包压缩。也通过网上了解,写法各有不同,参数也大不相同,因此,我重新整理一份资料,详细的介绍下各个配置项的意义所在,以便清晰了解如果使用。
以下配置主要正对webpack3+写法。
Babel转译器
在.babelrc配置文件中,主要是对预设(presets)和插件(plugins)进行配置,因此不同的转译器作用不同的配置项,大致可分为以下三项:
1.语法转义器。主要对javascript最新的语法糖进行编译,并不负责转译javascript新增的api和全局对象。例如let/const就可以被编译,而includes/Object.assign等并不能被编译。常用到的转译器包有,babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中可以只选用babel-preset-env来代替余下的,但是还需要配上javascirpt的制作规范一起使用,同时也是官方推荐
1 2 3 4 5 6 |
|
2.补丁转义器。主要负责转译javascript新增的api和全局对象,例如babel-plugin-transform-runtime这个插件能够编译Object.assign,同时也可以引入babel-polyfill进一步对includes这类用法保证在浏览器的兼容性。Object.assign 会被编译成以下代码:
复制代码代码如下:
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()
3.jsx和flow插件,这类转译器用来转译JSX语法和移除类型声明的,使用Rect的时候你将用到它,转译器名称为babel-preset-react
创建预设(presets)
主要通过npm安装babel-preset-xx插件来配合使用,例如通过 npm install babel-preset-stage-2 babel-preset-env --save-dev 安装,会有相应如下配置。
1 2 3 4 5 6 |
|
stage-2配置
babel主要提供以下几种转义器包,括号里面是对应配置文件的配置项
1 2 3 4 |
|
不同阶段的转译器之间是包含的关系,preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件,同样preset-stage-1转译器除了包含preset-stage-2的全部功能外还增加了一些额外的功能。
options配置介绍
官方推荐使用babel-preset-env来替代一些插件包的安装(es2015-arrow-functions,es2015-block-scoped-functions等等),并且有如下几种配置信息,介绍几个常用的,
更多配置可以参考官网https://babeljs.io/docs/plugins/preset-env/
1 2 3 4 5 6 7 8 |
|
targets可以制定兼容浏览器版本,如果设置了browsers,那么就会覆盖targets原本对浏览器的限制配置。
targets.node正对node版本进行编译
modules通常都会设置为false,因为默认都是支持CommonJS规范,同时还有其他配置参数:"amd" | "umd" | "systemjs" | "commonjs",systemjs我还不知道规范写法是什么,amd和umd以及commonjs相对比较熟悉,下面简要列举下书写规范。
amd代码规范,在ng1中会用到比较多,主要用于依赖注入:
1 2 3 4 5 6 7 |
|
commonjs规范,也是node环境中尊崇的一种规范:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
插件(plugins)
插件配置项同预设配置项一样,需要搭配babel相应的插件进行配置,可以选择配置插件来满足单个需求,例如早期我们会有如下配置:
1 2 3 4 5 6 7 8 |
|
但是这些插件从维护到书写极为麻烦,后来官方统一推荐使用env,全部替代了这些单一的插件功能,可以简化配置如下,也就是我前面提到了babel-preset-env:
1 2 3 4 5 |
|
这里主要介绍两款常用插件,分别是babel-plugin-transform-runtime,babel-plugin-syntax-dynamic-import。
基本配置代码如下:
1 2 3 4 5 |
|
transform-runtime
为了解决这种全局对象或者全局对象方法编译不足的情况,才出现了transform-runtime这个插件,但是它只会对es6的语法进行转换,而不会对新api进行转换。如果需要转换新api,也可以通过使用babel-polyfill来规避兼容性问题。
对Object.assign进行编译,配置与未配置经过webpack编译后的代码片段如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
对class定义类会进行编译,配置与未配置经过webpack编译后的代码片段如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
对Generator函数也有同上的编译效果,目前项目中使用该函数较小,一般使用promise替代,以及async await所以未对该函数做测试。
官方说对promise也会产生编译,但是实际测试结果却没有效果
经过webpack打包最终测试,引入transform-runtime该配置项后,打包入口js文件大小会略微增大,并不像官方说的能够缩小文件体积
未配置的最终打包效果:
配置后的最终打包效果:
虽然文件大小会有所增大,但是解决一些兼容性的问题,同时,从以上给出的测试代码例子来看,使用transform-runtime后,可以减少内部全局函数的定义,从结构上看尊崇了webpack的模块化思想,所以还是建议使用该插件。
syntax-dynamic-import
这个插件主要解决动态引入模块的问题
1 2 3 4 5 6 7 8 |
|
如果.babelrc配置项中使用了"stage-2",也可以不实用该插件,同样支持动态模块引入。
不然就会报以下错误:
- Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level, or (import 和 export只能在最外层,也就是不能用在函数或者块中)
- Module build failed: SyntaxError: Unexpected token, expected {
其他配置项
ignore
主要作用就是可以指定不编译那些代码
1 2 3 |
|
let,Object.assign,class定义都未编译,编译效果如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
minified
主要设置编译后是否是压缩,boolean类型,如果使用babel-cli进行打包编译文件这个配置项能够起到作用,但是目前大部分还是会依赖第三方打包工具,例如webpack,所以这个配置参数一般不用设置,webpack插件中的UglifyJsPlugin做了压缩的工作。
comments
在生成的文件中,不产生注释,boolean类型,webpack插件中的UglifyJsPlugin也同样集成了这个功能。
env
基本配置如下:
1 2 3 4 5 6 7 8 9 10 |
|
再谈兼容性问题
Babel默认只转换新的JavaScript语法,而不转换新的API,比如Iterator、Generator、Set、Maps、Promise等等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码,具体的可以参考babel-plugin-transform-runtime模块的 definitions.js 文件。
这里主要涉及到babel编译后依然会存在浏览器兼容性问题,一般会使用transform-runtime和babel-polyfill配合使用,对于后者只需要在项目入口文件require引入即可。
当然在使用类似Object.assign函数功能时,可以使用lodash库来替代,promise可以使用Q.js替代等等方案,这样依赖可以不需要引入以上插件,具体可以根据项目具体安排
总结
.babelrc配置文件主要还是以presets和plugins组成,通过和webpack配合进行使用,分享下我们在项目中常用的配置。以上都是通过学习总结出来的,有什么不对的地方希望指出。
vue项目开发使用的配置如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
react项目开发使用的配置如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
babel之配置文件.babelrc入门详解相关推荐
- html中babel编译vue,vue-cli中的babel配置文件.babelrc实例详解
本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...
- Tomcat(二):tomcat配置文件server.xml详解和部署简介
1. 入门示例:虚拟主机提供web服务 该示例通过设置虚拟主机来提供web服务,因为是入门示例,所以设置极其简单,只需修改$CATALINA_HOME/conf/server.xml文件为如下内容即可 ...
- java servlet 入门_servlet 入门详解
servlet 入门详解 Servlet是一种服务器端的编程语言,是J2EE中比较关键的组成部分.Servlet本质上也是Java类,编写Servlet需要遵循java的基本语法,但是与一般的Java ...
- mac电脑使用入门详解
大家来到MAC系统以后,首先在使用习惯以及界面上,都需要有一个适应的过程,小编为大家整理了这个小白教程,有助于你快速习惯这个MAC系统. 讲个笑话: 我一朋友看到Mac界面很酷,就买了个Mac笔记本, ...
- xposed模块编写教程_Xposed插件开发入门详解,
Xposed插件开发入门详解, 前言 Xposed的用处不必言说,能hook任意java写的代码,修改替换apk内部的资源文件. 至于如何开发一个XPosed的插件,官方给出的答案如下: https: ...
- FFmpeg入门详解之122:Qt5 FFmpeg本地摄像头采集预览实战
6.Qt5+FFmpeg本地摄像头采集预览实战 源码工程:S26_Test2 FFmpeg命令行处理摄像头 ffmpeg -list_devices true -f dshow -i dummy 命令 ...
- FFmpeg入门详解之124:Qt5 FFmpeg单路网络摄像头采集预览
Qt5+FFmpeg单路网络摄像头采集预览 源码工程:S26_Test4 RTSP协议简介 RTSP(Real Time Streaming Protocol),RFC2326 RTSP(Real T ...
- SQL注入攻防入门详解
转载自:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html SQL注入攻防入门详解 =============安全性篇目录= ...
- SQL 注入攻防入门详解
为什么80%的码农都做不了架构师?>>> SQL 注入攻防入门详解 原文出处: 滴答的雨 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对 ...
最新文章
- [CQOI2007]涂色PAINT
- WebWork深度探索之号外
- XAF-Domain Components 技术 使用接口来定义ORM业务对象
- c语言中系统函数设定像素,在imag中对每个像素应用自定义函数的快速方法
- [html] 你有使用过ins标签吗?说说它的用途
- html5小游戏是用js做的吗,谁说做H5动画和游戏一定要canvas?
- 为了涨薪,我给面试公司看我拿到的offer
- Java中的SPI(Service Provider Interface介绍及示例
- python自关联_django自关联,auth模块
- 计算机课怎么管纪律,浅谈如何巧妙设置学生机轻松管理机房课堂纪律
- 明日方舟 长夜临光side story
- Android黑名单自动挂断电话
- 《计算机组成原理(微课版)》第1章课后习题答案
- Netty系列三、Netty实战篇
- ctfshow菜狗杯webshell wp
- dreamer Waver cc 2014 安装失败解决
- dell服务器设置bios设置u盘启动不了系统,戴尔台式机bios设置图解教程|dell bios设置u盘启动...
- openGauss雄踞墨天轮2021年度中国数据库魔力象限领导者
- 壬华科技通过CMMI 3级认证
- 自己总结的web前端面试题之数据库