本文转载自默语的博客。

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. redis的过期策略

    1.了解redis 什么是Redis,为啥用缓存? Redis是用内存当缓存的.Redis主要是基于内存来进行高性能.高并发的读写操作的. 内存是有限的,比如Redis就只能用10个G,你一直往里面写 ...

  2. PAT甲级——1073 Scientific Notation (20分)

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  3. nginx四层负载及动静分离

    阿里云实验10.0.0.132 LB10.0.0.133 web0110.0.0.134 web02 步骤:1.安装nginx1.14 获取官网repo文件 yum install -y nginx ...

  4. Linux-进程关系

    (1).无关系 (2).父子进程关系 (3).进程组(group):由若干个进程构成一个进程组 (4).会话(session):由若干个进程组构成一个会话

  5. CPA-计划

    平时周一到周五上班晚上8点到12点,周末6-8个小时,然后没有节假日,一次差不多可以3.4科 审计 看150页  3小时,看完,做题 2天时间,5门课程,12小时考试,没想到能完整地挺过来.感觉税法战 ...

  6. visual studio2019下动态链接库的制作

    打开visual studio2019创建动态链接库项目,项目名称为20199324dll 然后定义宏:在头文件中定义即可,宏的作用的是允许该函数能够被外部访问,并直接调用.代码如下: // pch. ...

  7. D. Coloring Edges

    You are given a directed graph with 

  8. 阿里OSS下载文件，提示The request signature we calculated does not match the signature you provided. Check your key and signing method

    提示说是签名不对,但没搞懂签名具体是啥,以为之前做过,有正确的,就一点点比对,最后发现竟然是下载的文件路径,里面必须是/,而不能是\或\\,搞得我哭笑不得.比如,要下载的文件路径是:soft/cszt ...

  9. 拿到新linux服务器，从配置环境到跑起项目的部署流程

    今早翻开手机看到某云一条广告Linux1 核 2 GB 1 Mbps服务器10元一个月,正巧最近在搞linux,于是下单了一台2个月20. 上班来到公司后,借空闲时间一顿研究,一波骚操作配置后,浏览器 ...

  10. 吴裕雄--天生自然C语言开发：错误处理

    #include <stdio.h> #include <errno.h> #include <string.h> extern int errno ; int m ...