babel 用法及其 .babelrc 的配置详解,想做前端架构,拒绝一知半解...
Babel
官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码。
简而言之,就是把不兼容的 JavaScript 代码转为可兼容,可以执行的 JavaScript 代码。
功能:
语法转换
添加一些兼容性的 polyfill 功能
源码转换等
简单配置预览:
{
"plugins": [], // 插件配置
"presets": [] // 预设配置
} // 这里 .babelrc 配置的 // 官网建议用 module 的形式来配置,bable.config.js const presets = []
const plugins = []
module.exports = { presets, plugins }
配置介绍:
presets :是某一类 plugin 的集合,包含了某一类插件的所有功能。
plugin : 将某一种需要转化的代码,转为浏览器可以执行代码。
编译的执行顺序:
1、执行 plugins 中所有的插件
2、plugins 的插件,按照顺序依赖编译
3、所有 plugins 的插件执行完成,在执行 presets 预设。
4、presets 预设,按照倒序的顺序执行。(从最后一个执行)
5、完成编译。
1、主要插件介绍
babel-preset-es2015 ( ES2015 / ES6 插件集合 )
将 ES2015(es6) 的 javascript 代码 转化 浏览器兼容 javascript 代码
arrow-functions :箭头函数
block-scoped-functions :函数命名的方式转话,改为赋值的形式
block-scoping :let 转为 var
classes : es6 的类转化
computed-properties :属性命名的转化,如:var obj = { ['x'+a]: 1 }
destructuring :析构函数转化
duplicate-keys :属性优化
for-of :for of 的转化
function-name :优化函数命名
instanceof :instanceof 转化
literals :不同类型复制优化
new-target :继承 extends 转化
object-super :super 转化
parameters :params ,(a=1,b=2)=>{} , 默认参数转化
shorthand-properties :对象属性转化 {a,b} => {a:a,b:b}
spread :扩展属性转化 {...other}
sticky-regex :regex 优化,用 new Regex构建
template-literals :字符串模版
typeof-symbol :symbol 转化
unicode-regex :将正则的匹配字符串转为 unicode
babel-preset-es2016 ( ES2016 / ES7 插件集合 )
将 ES2016(es7) 的 javascript 代码 转为 浏览器兼容代码
exponentiation-operator :幂运算转化 x **= 3 ,x的3次幂
babel-preset-es2017( ES2017 / es8 插件集合 )
将 ES2017(es8) 的代码进行转化
async-to-generator : 转化 async/await 转为 generator 函数
babel-preset-stage-x ( ES2018/stage 插件集合 )
将 stage 阶段的代码转化
async-generator-function :将异步函数进行转化
dotall-regex :点号正则优化
object-rest-spread :解析构优化
optional-catch-binding :catch 加 finally 优化
unicode-proprty-regex
Modules
modules-amd / modules-commonjs / modules-systemjs / modules-umd
将不同的 export default x 转为不同的模块形式 amd / commonjs / systemjs / umd
Experiental ( 试验阶段 )
class-properties :class 的静态属性转化
decorators :装饰器转化
do-expressions
export-default-from :export 优化
export-namespace-from :export 优化
function-bind :bind 函数转化,obj::fun => fun.bind(obj) ::obj.fun => obj.fun(obj)
function-sent
logical-assignment-operators
nullish-coalescing-operaor
numeric-separator
optional-chaining
pipeline-opertor
throw-expressions
Minification( babel-minify )
运用代码压缩优化插件预设
...
这里自行可以去官网上查看...
babel-preset-react ( react 集合 )
react 的相关编译转化...
jsx 和 element 的一下转化
直接添加 react 的预设就可以了。
Other 其他一些插件
jscript :严格模式命名
object-assgin :assgin 转化
regenerator :generator 函数的转化
object-set-prototype-of-to-assign :setPrototype 转化
runtime
2、主要 presets 介绍
@babel/preset-dev
是一个智能预设。
根据浏览器和运行环境,自动的确定 babel 插件和 polyfills 。
没有任何配置的情况下,和 babel-preset-latest 一样 ( es2015/es2016/es2017一起使用 )。
{
"presets": [ "dev" ]
}
配置及其详解:
{
"presets": [
[
'@babel/preset-env',
{
'target':{
"browser":["ie>=8","chrome>=62"],
"node":"8.9.0",
"safari":"tp"
},
"modules":false,
"debug":true,
"uglify":true
"useBuiltIns":true
}
]
]
}
target : 描述您为项目配置的 支持/定位 的环境
browsers :浏览器的支持情况,将返回支持浏览器列表。 会被 target.ie 覆盖
[ 'ie>=8' ] 支持 ie8 的环境
"default" 默认
node :指定是 node 环境,且可以指定版本
safari : safari 版本
modules : 启用将 es6 转为其他模块
debug : 是否启用 console.log
include / exclude : 必须启用的 plugin 功能 / 不启用的 plugin 功能
uglify : 压缩代码
useBuiltIns :
false : 引用所有的 babel-polyfill , 在 webpack 中添加 babel-polyfill 入口处:
entry:[ 'babel-polyfill' , 'index.js' ] , 引用所有的 polyfill,体积变大
true : 引用部分,根据配置的 preset-env 环境,引用 polyfill ,
在入口文件中要引用 babel-polyfill
@babel/preset-react
这都是一些 react 相关的集合
不需要介绍了,有需要自己去官网浏览下.
Stage-x
草案中的预设..
该插件集合不存在 preset-env 集合中,所以需要引用....
3、babel-polyfill 兼容方法
babel的 preset-dev 中只会转化新的 Javascript 语法,不会转化新的 api。
例如:Generator / Set / Map 等
就是实现 babel 转化后的代码中,仍有不兼容的代码的转化。
原理:
babel-folyfill 是修改全局的对象的原型,添加不兼容的 api 方法,或者修改不兼容的 api 方法。
用法:
1、在入口文件的顶部添加:
require('@babel-polyfill'); import '@babel-polyfill'
2、webpack 中添加
{
entry:['@babel-polyfill','./app.js']
}
在 webpack 的配置文件中添加。
3、直接在 html 中引用,在打包 js 的文件之前
<script src = './babel-polyfill.js' ></script>
4、transform-runtime 插件
对 babel 转化后的代码,进行再次转化,与 babel-polyfill 一样,解决不兼容的全局 api 。
与 babel-polyfill 不同是它不是添加/修改全局对象。
它是对不兼容的方法进行特殊处理,也就是添加辅助方法来做兼容。
并且 transform-runtime 是在需要进行兼容转化时候引用。
transform-runtime 是依赖 babel-runtime ,且辅助方法都是引用的 babel-runtime
特点:
不会污染全局变量,因为不会修改全局对象
没有修改实例的方法,所以有些方法不能实现。
["transform-runtime", {
"corejs":false,
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
helpers : 是否使用 @babel-runtime/helpers 来代替内部的 helpers
coresjs : 是否用 @babel-runtime/corejs 中的辅助方法来替换 Map / Set 等方法
polyfill : 是否用 @babel-runtime 的辅助函数来代替 polyfill
regenerator : 是否用 辅助函数来代替 async / generator 函数
moduleName : 引用时候名字
5、@babel-register
通过 @babel-register 来注册当前所有的代码需要转码
var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('babel-register')(babelConfig);
很显然,这里可以传入一个 .babelrc 配置文件来进行转码时候的配置。
只需要添加到入口文件中。
node 端就可以这这样实现 babel 的转码。
6、tools
babel-parser : babel 的解析器,用于解析 Javascript / jsx / Typescript / flow 等代码
babel-core : babel 的核心文件,用于转码的
babel-generator : 代码的转化,源码和转化代码
babel-code-frame : 代码转化位置等转码映射
babel-helpers : 辅助器方法
babel-runtime : 提供了一些列的辅助方法,与 polyfill 类似
...
@bable/babel-cli 命令行工具
用于命令行编译文件,可以进行配置以及输出等操作。
用法:
babel input.js -options
// 编译 input.js 文件
配置 :
-o : 输出路径
-w :监听编译文件,实时编译
-s :输出source-map ,可以内敛
-d :当编译一个目录时候,-d 输出目录
--ignore : 忽略的文件
--plugins : 使用插件,用 , 隔开
--presets : 使用预设,用 , 隔开
--config-file : 使用 .babelrc 文件路径
.babelrc 配置详解
配置转化起 babel 三种不同作用:
1、用于语法转义的配置。 preset-env / stage-x 主要用于 es 的语法转义,
2、用于补丁的配置,即 polyfill 的配置。主要是 transform-runtime 。
3、用于不同框架的配置,如:react的jsx /flow 等
例子:
{
"presets":[
"react",
["env",{...}],
"stage-0"
],
"plugins":[
"pluginName",
["transform-runtime",{...}]
],
"ignore":["path",'file'],
"miniied":boolean,
"comments":boolean,
"env":{
"test":{
"presets":[],
"plugins":[]
}
},
...
}
主要几个配置
presets : 预设,插件的集合,倒序执行
plugins : 插件,先执行插件,在执行预设,顺序执行
ignore : 忽略的文件
minify : 压缩代码
common : 是否需要注释
env : 设置不同的环境,应用不同的配置,配置取值:BABEL_ENV,如若没有取 NODE_ENV 的值,默认为 development.
其他可以自行在官网浏览...
常见预设
env : 用于替换 es2015 / es2016 / es2017 的预设。根据环境引入插件
react :react的插件集合
react-optimize : react 代码优化,如去除 propsType 减少生产上面代码
stage-x :草案代码插件集合
flow : flow 插件集合
minify : 代码优化的集合
typescript : typescript 插件集合
常用插件
transform-async-to-generator : 异步函数 async/await 插件
transform-decorators-leagacy : 装饰器插件
syntax-dynamic-import :import() 插件
transform-runtime : 辅助器插件,用于ployfill
transform-object-rest-spread : 用于合并 var test = {a:1,b2};var t = {...test,n:1}
transform-funciton-bind : 用于编译 obj::fun => fun.bind(obj)
transform-es2015-modules-commonjs :es6 module 在 node 使用
https://www.cnblogs.com/jiebba/p/9613248.html
我的博客 : XiaoLong's Blog
博客园小结巴巴: https://www.cnblogs.com/jiebba
babel 用法及其 .babelrc 的配置详解,想做前端架构,拒绝一知半解...的更多相关文章
- 深入浅出Mybatis系列(四)---配置详解之typeAliases别名(mybatis源码篇)
上篇文章<深入浅出Mybatis系列(三)---配置详解之properties与environments(mybatis源码篇)> 介绍了properties与environments, ...
- apache 虚拟主机详细配置:http.conf配置详解
apache 虚拟主机详细配置:http.conf配置详解 Apache的配置文件http.conf参数含义详解 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd. ...
- JSHint配置详解
Also available on Github JSHint配置详解 增强参数(Enforcing Options) 本类参数设为true,JSHint会产生更多告警. bitwise 禁用位运算符 ...
- crossdomain.xml的配置详解
目录 1 简介 2 crossdomain.xml的配置详解 3 总结 1 简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及 ...
- log4j配置详解[http://www.iteye.com/topic/378077]
log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档,推荐使用1.2.X版,下载地址: http://logging.apache. ...
- 实时监控、直播流、流媒体、视频网站开发方案流媒体服务器搭建及配置详解:使用nginx搭建rtmp直播、rtmp点播、,hls直播服务配置详解
注意:这里不会讲到nginx流媒体模块如何安装的问题,只研究rtmp,hls直播和录制相关的nginx服务器配置文件的详细用法和说明.可以对照这些命令详解配置nginx -rtmp服务 一.nginx ...
- 转载 Spring、Spring MVC、MyBatis整合文件配置详解
Spring.Spring MVC.MyBatis整合文件配置详解 使用SSM框架做了几个小项目了,感觉还不错是时候总结一下了.先总结一下SSM整合的文件配置.其实具体的用法最好还是看官方文档. ...
- Android Studio gradle配置详解
android gradle配置详解 AppExtension类及其属性 可能大部分人看到AppExtension类会感觉到非常的陌生,其实我们在app中的build.gradle中填写配置信息的时候 ...
- 2-4、nginx特性及基础概念-nginx web服务配置详解
Nginx Nginx:engine X 调用了libevent:高性能的网络库 epoll():基于事件驱动event的网络库文件 Nginx的特性: 模块化设计.较好扩展性(不支持模块动态装卸载, ...
随机推荐
- 最短路 || POJ 1511 Invitation Cards
已知图中从一点到另一点的距离,从1号点到另一点再从这一点返回1号点,求去到所有点的距离之和最小值 *解法:正着反着分别建图,把到每个点的距离加起来 spfa跑完之后dist数组就是从起点到每一点的最短 ...
- Opencv竟然有中文资料
最近对于OpenCV看的较多,竟然不知不觉找到了一个中文网站,对于母语真的桥开心的嘻嘻 直方图均衡化: http://www.opencv.org.cn/opencvdoc/2.3.2/html/do ...
- sqlserver 分页问题
1.top 主要是在sql server 2000中使用,效率较差 2.row_number函数 这种方法是sql server 2005以后,支持了row_number函数后,才开始使用的. dec ...
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
- Java中的枚举--Enumeration
之前并没有注意到枚举这个知识点,因为之前在项目中并没有使用过枚举,可能是项目并不是很复杂的原因吧,今天看张孝祥老师的讲解,觉得,这个枚举真的有很多值得学习的地方,探究一下枚举的设计原理,底层到底是怎么 ...
- 正则表达式入门教程&&经典Javascript正则表达式----share
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- SpringCloud版本介绍和SpringBoot的兼容性
Spring Cloud是一个由众多独立子项目组成的大型综合项目,每个子项目有不同的发行节奏,都维护着自己的发布版本号.Spring Cloud通过一个资源清单BOM(Bill of Material ...
- SecureCRT 64位 破解版v8.1.4
http://www.xue51.com/soft/1510.html#xzdz securecrt 破解版是一款支持SSH1和SSH2的终端仿真程序,这个程序能够在windows系统中登陆UNIX或 ...
- 局域网虚拟机端口映射访问apache
如果我们在虚拟机内搭建好服务器后,希望可以在局域网内的设备上都能访问到这个虚拟服务器,就可以参照以下步骤来操作.其中包括了很多遇到的坑.先说说我的环境是 宿主机:windows 8.1 虚拟机:vmw ...
- BNUOJ 1575 Supermarket
Supermarket Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID ...