babel-loader的原理

本文转载自默语的博客

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,其他的都是包装。

posted @ 2017-08-25 10:41  fantasy-zxf  阅读(1709)  评论(0编辑  收藏  举报