思考|babel的价值在于时间差？
一、前言
本文以“babel的价值在于时间差？”，这个问题为开启关于 babel 的思考，进而复习相关 babel 知识。
重学babel的原因，说起来有点丢人，四年开发经验，我不知道原来 babel 曾用名 6to5， 当时听到这个名字，我有有点蒙，一时语塞。至于为什么被问？可以猜得出来。
tips：真实例子，不开玩笑的那种
也许是想考我们，有没有正经学过 babel，仔细一想，我真的似乎没有正经学过 babel？艾玛，这不是免费能看的消息。
babel 似乎很多工程化web前端项目都用了， 但平时好像具体业务上又没啥接触感，“隐匿性”挺强， 但其重要性不言而喻了。 今天整理复习一下 babel 相关的知识。
二、babel 认识简述
1. 我对babel的理解
1.1 babel是啥？能干啥？
根官网介绍，Babel 是一个 JavaScript 编译器，可以帮助人们使用下一代 JavaScript。 Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中 向后兼容的 JavaScript 版本。以下是 Babel 可以为您做的主要事情：
- 转换语法
- 目标环境中缺少的 Polyfill 功能（通过第三方 polyfill，例如 core-js）
- 源代码转换 (codemods)
- 和更多！
如果从6to5名字理解，就很见名知意了，不就是将es6代码转换成es5的嘛， 那么这就涉及语法（syntax）转换，以及新特性的支持。也就是说具有对代码转换的功能， 这就是上面说的三点了吧。艾玛，这样理解babel就顺畅好记多了。
1.2 babel的价值在于时间差？
babel的主要做用在于通过语法转换器，通过babel下的一些列插件包，让我们无需等待浏览器更新对新版es的支持， 就能立即享用这些新语法，新特性。这就是打时间差的中间商吗？要是浏览器支持es的速度快于 babel， 那么 babel 还有存在的价值吗？
思考tips： 从babel的市场份额看，打时间差，打空间差的中间商，大有可为？
先不谈babel可能还有的其他作用，那么现实上，浏览器对es的支持快于 babel 对es的支持可能吗？ 个人认为即使个别浏览器厂商能做到，大多数很难做到。 包括 pc 和 mobile，浏览器超过80种得有吧。
babel语法转换，源代码转换的功能，使代码可以更好的在低版本浏览器呈现。 那么程序员们，如果一直使用低版本的es去写代码，是不是也用用不上babel了？ 但程序员们大抵不会那样做，为啥？可能是实力不允许，可能是好奇精神，也可能是新特性的魅力所致。
思考tips：babel短时间内不会被取代，就像 JavaScript 如果补充了 TypeScript 新增的内容， 让 TypeScript 不再是 JavaScript 的超集，而是子集，那么 TypeScript 还会不消亡吗？ 就像 sass 不再是 css 的超集，而是子集，那么 sass 和 less 之类的 css 预处理语言， 还会存在吗？
但是世界上没有那么多如果，这可能涉及很多原因，而我能想到的几个原因， 一是动力问题，二是历史问题，三是职责问题。谈起职责，我想到了一个原则， 就是单一职责原则，从接口的角度讲，那就是每一个接口只负责承担自己那部分的功能， 该别的接口办理的事情，就让别的接口做，而不是把业务逻辑都偶合在一个接口。
思考tips：提到 babel之于浏览器，TypeScript 之于JavaScript， sass 和 less 之于 css，vue和react 之于 html。 web 前端的生态圈的似乎都围绕着 html、css、javascript。我们能从中或得一些启发吗？
2. babel的历史
2.1 6to5 的更名
下图是 6to5 插件包 npm 首页截图
npm 上记载 6to5 发布了 257 个版本，其 npm 安装命令是 npm i 6to5。 最后一个版本是 3.6.5，Issues 652，Pull Requests 160。6to5 是在 2014 年由 Facebook 的澳大利亚工程师 Sebastian McKenzie 正式发布的，2015年1月和另一个面同类项目 Esnext的团队合作开发 6to5，并于20115年2月15日，正式将 6to5 更名为 babel，同事解析引擎更名为 Babylon。
话说为啥babel要改名，嗯，这点很好理解，随着es新版本的发布，如果6to5继续支持将高版本的es转换成低版本， 那么这个名字就有点尴尬，也容易引起误解。
2.2 babel 重大版本发布时间线
a.时间线:
- 2015-02-15，6to5 更名为 babel
- 2015-03-31，babel 5.0发布
- 2015-10-30，babel 6.0发布
- 2018-08-27，babel 7.0发布
- 2022-04-25，babel 最新版本是 7.17.0
node_modules 中 babel7 包目录结构一览：
三、babel 的5个集成包
- @babel/cli
一个命令行工具，它可以让人们通过命令的形式来使用 babel 命令编译文件。不过一般似乎用不到。
- @babel/polyfill
根官网说，从 Babel 7.4.0 开始，这个包已经被弃用，取而代之的是直接包含core-js/stable（以填充 ECMAScript 特性）和 regenerator-runtime/runtime（需要使用转译的生成器函数）。
需要注意的是，如果确实需要这个包，最好确保在所有其他代码/要求语句之前调用它！，以保证它的作用范围是您想要的。
- @babel/plugin-transform-runtime
复用 Babel 注入的帮助代码以节省代码大小。
- @babel/register
使用Babel的方法之一是通过require钩子。require钩子将自己绑定到节点的require，并动态自动编译文件。
- @babel/standalone
@babel/standalone 提供了一个独立的 Babel 构建，用于浏览器和其他非 Node.js 环境。
四、babel 预设
1.@babel/preset-env
@babel/preset-env是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换（以及可选的浏览器 polyfill）。这既让你的生活更轻松，也让 JavaScript 包更小！
2.@babel/preset-typescript
如果您使用JavaScript 的类型化超集TypeScript ，建议使用此预设。它包括以下插件： @babel/plugin-transform-typescript。
tips：您需要指定--extensions ".ts"for @babel/cli& @babel/nodecli 来处理.ts文件。
3.@babel/preset-flow
如果您使用Flow（一种 JavaScript 代码的静态类型检查器），建议使用此预设。它包括以下插件： @babel/plugin-transform-flow-strip-types
4.@babel/preset-react
此预设始终包含以下插件：
- @babel/plugin-syntax-jsx
- @babel/plugin-transform-react-jsx
- @babel/plugin-transform-react-display-name
五、试解 babel 工程流程
六、项目中如何使用 babel
tips 未完待更新...,属实 babel 有点难领悟
