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. CF248E Piglet's Birthday(概率dp)

    题面 luogu CodeForces 题解 \(orz\) yyb 转移蜜罐其实是吓唬人的...... 转移的蜜罐都是尝试过的,所有只关心当前架子上的蜜罐数 设\(f[i][j]\)表示第i个货架有 ...

  2. mysql一些简单操作

    创建数据库,删除数据库 create database databasename charset utf8 collate utf8_general_ci;设置字符集utf8,校对规则utf8_gen ...

  3. [转] Node.js的线程和进程

    [From] http://www.admin10000.com/document/4196.html 前言 很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...

  4. scraoy之日志等级处理

    一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...

  5. Redis主从、哨兵、集群的简单区别

    2018-10-26 主从:读写分离,备份哨兵:监控,自动转移,选主集群:数据 hash 分片,同时包含主从及哨兵特性

  6. jenkins显示发送邮件发送成功但是邮箱没收到

    jenkins显示发送邮件发送成功但是邮箱没收到 解决方案: 重新配置一下系统管理-系统设置-Extended E-mail Notification

  7. DbUtils(二) 结果集实例

    单行数据处理:ScalarHandler    ArrayHandler    MapHandler    BeanHandler 多行数据处理:BeanListHandler    Abstract ...

  8. APP在用户设备发生crash,应该怎么修复

    Crash原因 Crash原因有共性,归纳起来有: 内存管理错误 程序逻辑错误  SDK错误 (部署版本< 编译版本) 主线程阻塞 内存管理错误 内存管理是iPhone开发所要掌握的最基本问题, ...

  9. Linux-Xshell5

    Linux-Xshell5 1.下载 2.安装 3.新建会话(连接) 点击新建 需要知道要连接的 IP, 查看命令   ifconfig 配置 名称可以自己命名,主机写要连接的 IP,其他的不能改 输 ...

  10. python内置函数简介

    False值: 0 / False / 空字符串 / [] / set() / dict() / () / tuple() / {} all(['a', 'b', 'c', 'd']) # all() ...