babel 详解

babel是什么

Babel 是一个 JavaScript 编译器。它是一个工具链，用于将 ECMAScript 2015+ 的语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

babel的编译流程（源码到源码的转移器实现）

parse（解析） | transform（转换） | generate （生成）

parse：通过 parser 把源码转成抽象语法树（AST）；
transform：遍历 AST ，babel 中最核心的是 babel-core，调用各种 transform 插件对 AST 进行增删改；

	let result = babel.transform(code, {
	    plugins: [
	        arrayPlugin
	    ]
	})

generate：把转换后的 AST 打印成目标代码，并生成 sourcemap。

核心源码组成（6个）

• babel-core：AST 抽象语法树的核心实现，主要是将 ES6+ 的代码转化为 AST ，然后遍历 AST 树，添加一些修改，然后再将修改后的 AST 树转化为可以供浏览器识别的 code
• babel-cli：执行一些可以使 babel 正常工作的可带参数的命令，是一种打包工具
• babel-plugin：Babel 转换 ES6+语法或API时需要的插件，比 presets 先执行，且执行顺序是按 plugin 的数组顺序执行
• babel-preset：一些通用 babel-plugin 的集合，减少 babel-plugin 多个引用，执行顺序是按 preset 的数组顺序倒序执行
• babel-runtime：把一些 ES5 不支持的 ES6+ API 按需引入，减少代码体积
• babel-polyfill：把全部 ES5 不支持的 ES6+ API 全量引入，体积较大

Plugins 和 Presets 的运行顺序

• Plugins 在 Presets 前运行
• Plugins 顺序从前往后排列
• Presets 顺序是颠倒的（从后往前）

    {
      "plugins": ["aplugin", "bplugin"],
      "presets": ["a", "b", "c"]
    }

plugins运行顺序：aplugin，bplugin
presets运行顺序： c ， b ，然后a

安装

webpack 4.x | babel-loader 8.x | babel 7.x

	npm install -D babel-loader @babel/core @babel/preset-env webpack

未完待续…