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 的一些记录的更多相关文章

  1. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  2. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  3. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  4. 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用

    深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...

  5. Babel初体验

    原文地址:→传送门 写在前面 现在es6很流行,尽管各大浏览器都还不能支持它的新特性,但是小伙伴们还是很中意它呀,于是小小的学习的一下 Babel 这里我们不介绍es6相关内容,只是说下入坑前奏,记录 ...

  6. 理解Babel是如何编译JS代码的及理解抽象语法树(AST)

    Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是?   很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都 ...

  7. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  8. Eclipse CDT开发环境搭建及问题记录(Windows)

    这两天在整Eclipse,在此记录过程中遇到的一些问题. 1.安装JDK,配置系统路径: 2.下载Eclipse 直接访问Eclipse官网(https://www.eclipse.org/downl ...

  9. babel 7.x 和 webpack 4.x 配置vue项目

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...

随机推荐

  1. vux构建的项目打包成app出的一些问题

    1.static里面能放一些外部的插件,css可以放static,引用的时候按照相对路径写, less不可以,因为放在static里面的文件不会经过webpack的处理,所以也就不会编译成css,所以 ...

  2. poj2393tmp

    #include"iostream" #include"stdio.h" #include"algorithm" using namespa ...

  3. ibatis配置文件中的XML解析错误The content of elements must consist of well-formed character data or markup.

    在检查过所有的标签名都没有问题的情况下. xml中的小于号属于非法字符. SQL语句中则可能需要小于号,此时就需要用<![CDATA[  ]]>将小于号包裹,如此不会被xml解析器解析. ...

  4. zabbix_agent 主动模式配置

    一,主动与被动模式 默认的模式就是被动模式由服务端发送执行指令,客户端再执行 主动模式则为客户机自己找服务器拿任务执行 二,主动模式配置 查看客户端配置文件 grep '^[a-Z]' /etc/za ...

  5. 06-struts2与ognl的结合

    1 参数接收 2 配置文件中 1 Demo2Action package www.test.c_config; import com.opensymphony.xwork2.ActionSupport ...

  6. TOJ 4008 The Leaf Eaters(容斥定理)

    Description As we all know caterpillars love to eat leaves. Usually, a caterpillar sits on leaf, eat ...

  7. HDU 5288——OO’s Sequence——————【技巧题】

    OO’s Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  8. D3(v5) in TypeScript 坐标轴之 饼状图生成

    饼状图生成时依旧遇到了类型问题,记录如下: import * as d3 from 'd3'; import * as React from 'react'; class TestGraph exte ...

  9. sql 创建用户脚本

    USE master go  CREATE LOGIN jiazhuang --用户名 WITH PASSWORD = 'sa', --密码 DEFAULT_DATABASE = JiaZhuan, ...

  10. js 获取时间相关

    $(document).ready(function () {            var date = new Date();            var sb = "";  ...