babel 的一些记录
babel 的作用是将高版本的代码转换成低版本的可支持的代码;
过程是 读取 source code 转换为语法树 -》 经过处理 -》 转换为 code;
babel有preset和plugin,有啥作用和区别呢?
babel的代码的转换处理是通过plugin转换的,多个plugin执行顺序是从上到下;
presets是plugin的集合,不需要挨个的去写plugin了;
- Plugin 会运行在 Preset 之前。
- Plugin 会从第一个开始顺序执行。ordering is first to last.
- Preset 的顺序则刚好相反(从最后一个逆序执行)。
babel的配置
是一个json结构,字段有presets和plugin ;
也支持env环境设置,是从process.env.BABEL_ENV 进行读取当前的环境变量,默认是development
{
"env": {
"production": {
"presets": ["env","react"]
},
"development":{
"presets": [
"env",
"react"
]
}
}
}
待续。。。。。。
babel 的一些记录的更多相关文章
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- 使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...
- 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用
深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...
- Babel初体验
原文地址:→传送门 写在前面 现在es6很流行,尽管各大浏览器都还不能支持它的新特性,但是小伙伴们还是很中意它呀,于是小小的学习的一下 Babel 这里我们不介绍es6相关内容,只是说下入坑前奏,记录 ...
- 理解Babel是如何编译JS代码的及理解抽象语法树(AST)
Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是? 很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都 ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- Eclipse CDT开发环境搭建及问题记录(Windows)
这两天在整Eclipse,在此记录过程中遇到的一些问题. 1.安装JDK,配置系统路径: 2.下载Eclipse 直接访问Eclipse官网(https://www.eclipse.org/downl ...
- babel 7.x 和 webpack 4.x 配置vue项目
很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...
随机推荐
- PIE SDK反距离权重插值算法
1.算法功能简介 反距离权重 (IDW) 插值使用一组采样点的线性权重组合来确定像元值.权重是一种反距离函数.进行插值处理的表面应当是具有局部因变量的表面.此方法假定所映射的变量因受到与其采样位置 ...
- input type=checkbox的值后台怎么接受
input type=checkbox的值是on或off 实体类中这样写即可 public void setChapterVisibility(Object chapterVisibility) { ...
- css 小知识点
苹果浏览默认表单 单选 多选 下拉列表 效果的去除 提交按钮-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;ap ...
- shell 进阶之匹配字符串
一,操作字符串 1,字符串长度 expr 命令取字符串函数 自带shell函数读取 2,匹配字符串开头字串的长度 !!!!!!!!!!!!$substring是正则表达式.!!!!!!!!! ...
- (转)Linux网络状态工具ss命令使用详解
Linux网络状态工具ss命令使用详解 原文:http://www.landui.com/help/show-5991.html ss 是 socket statistics 的缩写.顾名思义,ss ...
- 022-pinyin4j工具类模板
模板一 package ${enclosing_package}; import java.util.Arrays; import net.sourceforge.pinyin4j.PinyinHel ...
- TOJ 1023 Taxi Cab Scheme
Description Running a taxi station is not all that simple. Apart from the obvious demand for a centr ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- android studio 框架搭建:加入注解框架Annotations
参考github上的demo,新建一个project后,会有一个位于app文件夹下的局部build.gradle文件和一个位于根目录project下的全局build.gradle文件,我们要修改的是局 ...
- Nginx实践:(2) Nginx语法之localtion
1. 概念 location是根据uri进行不同的定位.在虚拟主机的配置中,是必不可少的.location可以将网站的不同部分,定位到不同的处理方式上. location语法格式如下: locatio ...