本文转载自默语的博客。

Babel包的构成

核心包

  • babel-core：是babel转译器本身，提供转译的API，例如babel.transform等，webpack的babel-loader就是调用这些API完成转译的
  • babylon：js的词法解析器
  • babel-traverse：用于对AST（抽象语法树Abstract Syntax Tree）的遍历
  • babel-generator：根据AST生成代码

其他

  • babel-cli：用于命令行转码
  • babel-types：用于检验，构建和变更AST的节点
  • babel-helpers：一系列预制的babel-template函数，用于提供给一些plugins使用
  • babel-template：辅助函数，用于从字符串形式的代码来构建AST树节点
  • babel-code-frame：用于生成错误信息，打印出错误点源代码帧以及指出出错位置
  • babel-register：通过绑定node.js的require来完成自动编译
  • babel-polyfill：JS标准新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装
  • babel-runtime：类似于polyfill，但是不会污染全局变量

  • polyfill与runtime的区别

    最主要的区别就是polyfill引入后，会将新的原生对象、API这些都直接引入到全局环境，这样就会污染全局变量，这也是polyfill的缺陷。所以就轮到babel-runtime上场了。

  • transform-runtime和babel-runtime

    transform-runtime是将js中使用到新的原生对象和静态方法转译成对babel-runtime的引用，而其中babel-runtime的功能其实最终也是由core-js来实现的，其实真正的核心是上面所讲的core-js，其他的都是包装。

babel-loader的原理的更多相关文章

  1. android universal image loader 缓冲原理详解

    1. 功能介绍 1.1 Android Universal Image Loader Android Universal Image Loader 是一个强大的.可高度定制的图片缓存,本文简称为UIL ...

  2. 回头再看看babel的实现原理

    一.前言 babel在大家的工作中应该没少用,但是为什么它能将ES6转成ES5呢?一个有态度的前端er肯定会想抛开迷雾,看看其中的奥秘. 记得很早前自己有去了解过相关方面的内容,但是时间久远,现在已是 ...

  3. webpack的loader的原理和实现

    想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...

  4. webpack源码-loader的原理

    版本 webpack :"version": "3.12.0", webpack配置中的loaders配置是如何传递的 webpack/lib/NormalMo ...

  5. Babel运行原理

    前言     之前翻博客园的时候,看到有人朋友分享阿里巴巴的面试题,其中有一道题就是关于ES6转ES5 原理的,当时我看到感觉到自己离去阿里巴巴的路还很远啊,像我们大部分做开发的时候,都只知其然不知 ...

  6. babel那些事儿

    从前,一提到新东西,我的反应就是兼容性好不好,如果不能满足产品经理的需求,就还是用保守的方式实现吧.毕竟前端开发是一件很灵活的事,怎么写都行,至于为何会用某种方法,一定是综合考虑兼容性,性能,用户体验 ...

  7. WEBPACK & BABEL 打包项目

    本文首发于 BriFuture's Blog. 最近在用 Vue 重写之前的一个项目 Compass,这个项目以前是用 QML + JavaScript 在 Qt 平台上搭建的.这是我本科毕设时做的一 ...

  8. React开发环境搭建（react,babel,webpack webpack-dev-server)

    最终效果: 配置webpack 自动编译脚本, 内容更改后浏览器页面自动刷新,提高效率. 主要靠webpack 的watch 功能. npm 全局安装的包: webpack webpack-cli w ...

  9. Babel（抽象语法树，又称AST）

    文章:https://juejin.im/post/5a9315e46fb9a0633a711f25 https://github.com/jamiebuilds/babel-handbook/blo ...

  10. 面试官: 聊一聊Babel

    点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 前言 Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都 ...

随机推荐

  1. Python中列表的copy方法

    1.在列表中存在一个名为copy的方法,就像字面意思一样copy方法是用于复制列表元素的,示例如下: names = [‘Zhangsan’,’Lisi’,’WangErgou’] names2 = ...

  2. UML-SSD-定义

    1.NextGen例子 SSD来自用例文本 2.定义 1).针对的是用例的一个特定场景 2).参与者与系统之间交互事件(跨系统边界,不画系统内部流转,即黑盒) 比如:收银员 访问系统A.系统B,此时只 ...

  3. Cocoapod-终端

    安装循序: Xcode->RVM->Ruby(安装过程中需要安装homebrew)->CocoaPats 参考文章: 安装地址:http://www.cnblogs.com/dagu ...

  4. 唐顿庄园S01E01观看感悟

    刚刚看了唐顿庄园的第一季第一集.看第一遍的时候,主要是看剧情,看看有没有什么吸引人的.我是一带而过的.等到看第二遍的时候,仔细观察画面,欣赏画面的美感,琢磨人物的台词对话.不断的倒退回放,越看越有滋味 ...

  5. 【学习笔记】 2-SAT问题

    Algorithm Description \(2-SAT\)问题就是给定一串布尔变量,每个变量只能为真或假. 要求对这些变量进行赋值,满足布尔方程. 会有一些形如 \(x_1||x_2\) 或者 \ ...

  6. Linkage Disequilibrium|D‘|r2

    I.10 Other Measures of Linkage Disequilibrium 因为D的取值强烈地依赖于人为制定的等位基因频率(PA及PB),所以它不利于LD程度的比较.标准化的不平衡系数 ...

  7. iOS之正则表达式(一)

    这几天研究正则表达式发现正则表达式真是个好东西,可以在支付的时候轻松匹配交易数额,入门内容以及匹配如下: @interface ViewController () @property (weak, n ...

  8. Netty之内存泄露

    直接内存是IO框架的绝配,但直接内存的分配销毁不易,所以使用内存池能大幅提高性能. 1.为什么要有引用计数器 Netty里四种主力的ByteBuf,其中UnpooledHeapByteBuf底下的by ...

  9. 40）PHP，mysql_fetch_row和mysql_fetch_array和mysql_fetch_assoc的区别

    分析: mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元中,偏移量从 开始. 注意, ...

  10. 吴裕雄--天生自然 JAVA开发学习：MySQL 连接

    CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DEFAULT '' ...