Babel 6 概述
babel-core
只转换语法(如箭头函数)
babel-polyfill
由core-js和regenerator runtime组成。
1 core-js用来支持新的全局变量(例如 Promise、Symbol等) 、新的原生方法(如 String.padStart等)。
2 regenerator runtime由facebook提供,用ES 5实现了生成器函数(GeneratorFunction)、迭代器(AsyncIterator)。
生成器函数(function *)、async/await函数会被编译成regenerator runtime实现的生成器函数、迭代器来运行。
Presets(预设)
1 babel-preset-env:指定目标环境(浏览器类型、浏览器版本)
2 babel-preset-stage-x:对现在尚未被批准发布的部分进行转换。
TC39委员会将提案分为以下阶段:
- Stage 0 - 稻草人: 只是个想法可能会有相关的 Babel 插件。
- Stage 1 - 提议: 值得深入。
- Stage 2 - 草稿: 初始规范。
- Stage 3 - 候选: 完整的规范和初始浏览器实现。
- Stage 4 - 结束: 将被添加到下一个年度版本中。
3 babel-preset-react用来编译JSX语法
4 babel-preset-vue用来编译Vue
Plugins(插件)
控制babel的编译行为。
babel-plugin-transform-runtime可以设置编译后的脚本文件引用公共函数等,而不是每个脚本文件都持有一个副本,导致代码冗余。
Babel 6 概述的更多相关文章
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数
一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...
- JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- Babel插件:@babel/plugin-transform-runtime
一 概述 每个Babel编译后的脚本文件,都以导入的方式使用Babel的帮助函数,而不是每个文件都复制一份帮助函数的代码. 1 优点 (1)提高代码重用性,缩小编译后的代码体积. (2)防止污染全局作 ...
- JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换
现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...
- ES6的新特性(1)——ES6 的概述
ES6 的概述 首先,感谢马伦老师的ES6新特性的教程. ECMAScript 和 JavaScript 的关系是 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前 ...
- 004-React入门概述
一.概述 参考地址:https://reactjs.org/docs/try-react.html 1.1.本地快速体验 <!DOCTYPE html> <html> < ...
- JavaScript 基础:Babel 转译 class 过程窥探
零.前言 虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的.当时,假设我们要定义一个可以设置 id 与坐标的类,我们会 ...
- How Javascript works (Javascript工作原理) (十五) 类和继承及 Babel 和 TypeScript 代码转换探秘
个人总结:读完这篇文章需要15分钟,文章主要讲解了Babel和TypeScript的工作原理,(例如对es6 类的转换,是将原始es6代码转换为es5代码,这些代码中包含着类似于 _classCall ...
随机推荐
- 一、新建springBoot项目
三种方式新建SpringBoot项目: 官网, myeclipse, idea 1.官方网站新建(https://start.spring.io/) 1)打开官网,选择自己需要的springBo ...
- [UE4]判断2个向量是否相等
一.因为向量是3个浮点数,如果不使用误差的话,计算机里面的浮点数是有一定误差的. 二.如上图所示,如果2个向量的误差1厘米(UE4的单位是厘米),则表示2个向量相等.
- Linux下基础查看命令
1:查看系统32位还是64位,如下三种方法 uname -m uname -a ls -ld /lib64 2:查看系统版本 cat /etc/redha ...
- 3、redis使用场景
现代高并发复杂系统面临的挑战 现代系统随着功能的复杂化,各种各样需求层出不穷,面对愈加复杂话的业务系统.越来越庞大的用户群体,以及用户对体验的要求越来越高,性能就变得更加重要. 抛开代码逻辑.服务器性 ...
- Linux 的文件软链接如何删除
Linux 的文件软链接如何删除创建软链接即用 ln -s 原始文件或文件夹 目标文件或文件夹 举例:[root@recover test]# pwd/test[root@recover test]# ...
- SUID、SGID详解
文章转载至:http://tech.ccidnet.com/art/2583/20071030/1258885_1.html 如果你对SUID.SGID仍有迷惑可以好好参考一下! Copyright ...
- rocketmq控制台搭建(rocketmq-console)
1. 下载开源的rocketmq-externals项目 https://github.com/apache/rocketmq-externals 2. 找到rocketmq-console,先编辑一 ...
- php 跨域问题 解决办法
php 跨域问题的解决主要有两步: 本人使用的是 windows下的 phpstudy的集成环境 1.修改服务器配置文件 在 apache 的配置文件 D:\phpStudy\Apache\con ...
- 灰熊:在这6个信息流和DSP平台投放后,我总结了这些血泪经验!
笔者有幸参与公司的一款重度游戏的推广,推广以来市面上主流的信息流和DSP 平台都投过一番,今天就零零碎碎地讲讲各个平台的特点以及用户质量. 需要提前说明的是,文章的观点仅限于各个平台的 iOS 流量, ...
- 啊哈算法第四章第三节 层层递进-广度优先搜索 java实现
package corejava; public class FourThree { static int [][]a=new int[50][50]; static int [][]b=new in ...