babel的plugins和presets解析
babel可以将当前运行平台(浏览器、node服务器)尚不支持的下一代或几代js语法编译为当前支持的js语法版本,比如可以把es6 es7和es8的js代码编译为es5的代码。
需要明确的几个概念:
- es2015 === es6
- es2016 === es7
- es2017 === es8
plugin: babel的插件,在6.x版本之后babel必需要配合插件来进行工作
preset: babel插件集合的预设,包含某一部分的插件plugin
{"plugins": ["transform-es2015-arrow-functions"],"presets": ["es2015"] }
babel-preset-es2015: 可以将es2015即es6的js代码编译为es5
babel-preset-es2016: 可以将es2016即es7的js代码编译为es6
babel-preset-es2017: 可以将es2017即es8的js代码编译为es7
babel-preset-stage-x: 可以将处于某一阶段的js语法编译为正式版本的js代码
stage-X: 指处于某一阶段的js语言提案。
- 提案共分为五个阶段:
- stage-0: 稻草人-只是一个大胆的想法
- stage-1: 提案-初步尝试
- stage-2: 初稿-完成初步规范
- stage-3: 候选-完成规范和浏览器初步实现
- stage-4: 完成-将被添加到下一年发布
当前 babel 推荐使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范围更广,包含es2015 es2016 es2017的所有语法编译,并且它可以根据项目运行平台的支持情况自行选择编译版本。
使用方法: '.babelrc' 中 'es2015' 改为 'env',
.babelrc{"presets": ["env", "stage-2"] }
插件中每个访问者都有排序问题。
这意味着如果两次转译都访问相同的”程序”节点,则转译将按照 plugin 或 preset 的规则进行排序然后执行。
- Plugin 会运行在 Preset 之前。
- Plugin 会从第一个开始顺序执行。ordering is first to last.
- Preset 的顺序则刚好相反(从最后一个逆序执行)。
babel的plugins和presets解析相关推荐
- Babel配置中的presets、plugins、各个阶段stage的含义
什么是Babel Babel 官方文档: https://babeljs.io/ Babel 中文文档:https://www.babeljs.cn/ 我们知道各个浏览器对JavaScript版本的支 ...
- babel实战之预设(Presets)
1.简介 不想自己动手组合插件?没问题!preset 可以作为 Babel 插件的组合,甚至可以作为可以共享的 options 配置. 2.官方 Preset 我们已经针对常用环境编写了一些 pres ...
- [vue] 从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型 前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
- 如何写好.babelrc?Babel的presets和plugins配置解析
什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...
- 【转】如何写好.babelrc?Babel的presets和plugins配置解析
什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为 ...
- Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Babel presets stage
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码. 以 ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- webpack 配置 babel
文章目录 根据 webpack 版本的不同,安装的 babel 依赖有些区别,下面的是 webpakc 4.2 及以上版本安装的依赖. 4.2 之前的是:babel-core.babel-pres ...
最新文章
- 女生学软件测试有哪些优势
- mysql mysqld_multi 单机多进程
- Android Studio 分析器详解
- [常用类]Scanner 类
- Java面试题:单例设计模式、适配器模式的不同方式
- [设计模式] 17 中介者模式 Mediator Pattern
- 从入门到入土,Redis简明教程
- php 微商城 开源,微商城开通为什么选php开源网店系统
- [转载] java调用c++的dll及java.lang.UnsatisfiedLinkError解决方法
- nodeJS---URL相关模块用法(url和querystring)
- 可以用字符流复制一张图片文件吗?
- 凸优化系列一:什么是最优化算法
- maven解决“Could not calculate build plan”问题
- 网络安全--文件分离工具 foremost
- ANTLR中文手册之三(ANTLR 元语言-元语言词汇表)
- 正则判断手机号地区_判断手机号正则表达式
- ElasticSearch中 如何使用“group by“ 进行日 周 月 年统计呢?(ElasticsearchTemplate进行聚合查询)
- 【爬虫实战】国家企业公示网-crawler爬虫抓取数据
- 论文解读:基于共享混合深度学习架构的DNA形状特征预测转录因子结合位点
- iOS开发中常用的那些工具
热门文章
- 从构建进程间缓存设计谈Webpack5 优化和工作原理
- Maya 2018 Arnold在AOV通道中制作运动向量模糊的方法
- 【Spring】SpringIOC容器的配置及使用
- XMind 中文版下载中心 绿色便携本
- 4、阻止表单onsubmit事件的默认行为
- ipad2019编写html,2019版ipad和2018版有什么区别
- Linux搭建MonggoDB环境
- IDEA自带maven报错maven-default-http-blocker (http://0.0.0.0/): Blocked mirror for repositories解决
- MySQL 错误代码:1055 解决方案(推荐!!)
- windows Server设置密码永不过期,取消密码复杂度,修改密码