1.初探 babel——基础加实践篇
2.Loader学习，简析babel-loader
3.Async、Await 从源码层面解析其工作原理
4.长文详解TypeScript与Babel、webpack的关系以及IDE对TS的类型检查
5.babel的polyfill和runtime的区别
6.解剖Babel —— 向前端架构师迈出一小步
初探 babel——基础加实践篇
探索Babel的奥秘：从基础到实践 Babel，作为前端开发的守护神，它扮演着将现代JavaScript语法（ES+）转化为浏览器兼容版本（ES5）的实时语音通话 源码桥梁。这一过程分为三个关键步骤：解析、转换和生成。解析: @babel/parser是解析神器，它将源代码转化为抽象语法树（AST），这是一种包含词法和语法结构的模型，如console.log('你好，babel')的树状形式清晰可见。
转换: @babel/traverse如同探索者，遍历AST，用插件的力量将新特性（如箭头函数）转换为旧时代的语言。
生成: 最后，@babel/generator负责生成转化后的可执行代码，确保在任何环境中都能流畅运行，即使在支持程度较低的IE浏览器。
Babel的强大还体现在其灵活的插件机制，语法插件如babel-plugin-syntax-trailing-function-commas扩展解析能力，而转译插件如babel-plugin-transform-es-arrow-functions则负责实际的语法转换。预设（preset）如@babel/preset-env和@babel/preset-react，它们是预设好的插件集合，智能地根据环境调整转译策略。 在实际应用中，react 组件源码Babel的执行顺序是插件在预设前执行，遵循从前向后的顺序，确保兼容性。配置项包括字符串形式和数组参数，核心模块@babel/core负责整合配置，进行代码的全程处理。 举几个实例：@babel/runtime提供了必要的helper函数，@babel/plugin-transform-runtime确保这些函数在运行时动态引入，减少重复。@babel/preset-env根据Browserslist配置自动转译，babel-loader在Webpack打包时发挥作用，@babel/core则允许用户自定义目标JavaScript版本。 在实践中，你可以通过创建小项目或使用命令行来验证这些工具的效果。通常，你会在命令行中调用babel，在package.json中配置，或者借助构建工具如Webpack的插件来整合Babel。 需要注意的是，如PI和IE8不支持const和includes等特性，这时@babel/polyfill可以辅助，但可能引入全局污染。相比之下，使用@babel/plugin-transform-runtime更佳，因为它提供更精细的控制。学习Babel，wear os 源码就是学习如何优雅地处理跨浏览器兼容性，每个工具和功能都有其作用和局限。 更多深入学习资料参考：/docs/，/post/，/post/。 作者：于丹秋，这段内容旨在引导你入门Babel的世界，但Babel的魔力远不止于此，期待你亲自探索更多可能。Loader学习，简析babel-loader
Loader学习：深入解析babel-loader的功能与实现
Webpack中的Loader作为模块转换器，其核心职责是将源文件内容转换为所需格式。通常，Loader通过链式处理，以单一功能的形式依次作用于源文件，确保输出符合预期。Loader作为Node.js模块，其核心是导出一个函数，利用webpack提供的API进行操作，如处理返回内容、sourceMap、AST等。
除了基本的代码转换，Loader还可以返回额外信息。通过webpack的callback API，开发者可以控制返回结果的共享秤源码处理方式。Loader的同步与异步特性，异步Loader如file-loader，需要明确告诉webpack处理的是二进制数据。此外，为了优化性能，Loader可以利用cacheable API缓存转换结果，当依赖不变时，可以显著提升加载速度。
学习Loader的深入理解，需要掌握各种API，如获取options、处理二进制数据、缓存策略等。以babel-loader为例，其源码中体现了这些概念。首先，它依赖@babel/core，并根据用户配置进行定制化处理。loader函数的核心部分，涉及options解析、配置加载、source处理、缓存判断以及元数据订阅等步骤，最后返回转换后的结果。
总结来说，Loader的棋牌俱乐部 源码核心是处理输入和输出，通过调用webpack提供的API实现各种功能。了解并掌握这些API，我们就可以开始编写自己的定制Loader，如babel-loader那样，为项目提供强大的代码转换能力。现在，对Loader有了更直观的认识，对编写Loader的步骤和技巧也更加清晰了。
Async、Await 从源码层面解析其工作原理
深入理解 Async 和 Await 的工作原理，往往需要从源码层面进行剖析。使用 Babel 进行转换后，可以清晰地发现 Async 和 Await 实际上借助了 switch-case 和 promise，实现对流程的控制。以一个使用 Async 和 Await 的函数为例，我们仅关注核心部分代码。
经过 Babel 转换后的 name 函数，可以被拆分为三个主要部分：await 部分、return 部分以及 async 流程控制的结束部分（即 case "end"）。这个拆分使得流程控制变得更为直观。在流程控制中，每一步执行后，都会等待合适的时机进入下一次执行。
这个“合适的时机”并非由 Async 内部决定，而是由执行的内容决定。例如，在发送异步请求后，只有在请求返回后才会进入下一个 case。
为了实现流程控制，需要借助 regenerator-runtime 这个 generator、Async 函数的运行时。它负责将 name 函数进行包装，并添加流程控制所需的信息。如 _context，以及用于流程控制的关键 helper，如 _asyncToGenerator 和 asyncGeneratorStep。通过这些辅助工具，再在 regenerator-runtime 的基础上进行一层包装，最终得到一个可以执行的函数。这个函数实际执行时，会调用封装后的函数。
在封装后的函数中，async1、async2 等实际上是在执行最终的封装函数内部的调用。这里的第三步是 Async 函数的核心机制。在 Promise.resolve(value).then(_next) 中，value 是每个分段最后的 case 返回的值。如果 value 是一个 Promise，那么在它 resolved 后，会将其.then添加到微任务队列。如果 value 不是一个 Promise，则直接添加，因为.then是一个微任务，当执行到它时，会调用_next，从而开始执行下一个 case。
经过转换后的代码展示了封装后的函数内容，最终执行的是封装后的函数，因此说 async1、async2 执行实际上是执行封装后的函数。在封装后的函数内部，会调用 async1、async2。
长文详解TypeScript与Babel、webpack的关系以及IDE对TS的类型检查
ts是js的超集，具有静态类型分析功能，在静态代码解析过程中对ts代码进行类型检查，确保类型一致性。要加入ts到webpack项目中，需要了解TypeScript、Babel和IDE对TS类型检查的关系。
主流浏览器只认识js代码，ts代码需要编译为js代码后才能运行。编译ts代码需要以下要素：官方tsc编译器或babel+ts插件编译。
官方tsc编译器使用tsc编译器，需要tsconfig.json配置文件。编译后的js代码可以使用commonjs或ESM模块化方案。ts中的模块化与js中的模块化不同，需要指定js的模块化表达。
babel+ts插件使用babel将ts源代码编译为js代码。babel的插件分为语法插件和转译插件，可以将插件组合成preset。babel-loader是webpack和babel的桥梁，处理ts文件时比ts-loader更高效。
webpack项目级TS使用ts-loader或babel-loader。ts-loader内部调用tsc编译ts代码，babel-loader使用babel处理ts代码。webpack需要配置loader来处理ts文件。
tsc与babel编译的差异在于，tsc进行类型检查，而babel不进行类型检查。IDE通过启动ts检测服务进行类型检查，可以全局或为每个项目单独安装typescript。
babel的polyfill和runtime的区别
ES6现在浏览器都支持的不够,
nodejs的v8同样,
即使用use
strict,
很多特性也都不支持
babel可以把es6转成传统的javascript,
就是说你写es6,
然后用babel,
就可以正常在浏览器中运行了,
es6是发展方向。
babel-polyfill
使用场景
Babel
默认只转换新的
JavaScript
语法，而不转换新的
API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise
等全局对象，以及一些定义在全局对象上的方法（比如
Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用
babel-polyfill，为当前环境提供一个垫片。
babel-runtime
使用场景
Babel
转译后的代码要实现源代码同样的功能需要借助一些帮助函数，例如，{
[name]:
'JavaScript'
}
转译后的代码
解剖Babel —— 向前端架构师迈出一小步
解剖Babel，前端架构师的探索之旅
Babel，作为前端工程基石，其功能远超API polyfill的简单定义。它是一个JavaScript编译器，负责接收并处理代码，转化为兼容目标环境的代码。这个过程涉及到Babel的核心组件，如preset、plugin和runtime等。
尽管preset和plugin概念初学者可能感到困惑，但它们是Babel实现编译和扩展功能的关键。preset是插件的集合，允许根据特定目标环境动态调整编译行为。而plugin则提供了插件化接口，开发者可以通过它们定制编译过程。
深入Babel的底层，核心模块如@babel/parser解析JavaScript源代码，生成抽象语法树(AST)，再由@babel/traverse、@babel/types和@babel/generator等处理，最终输出修改后的代码。核心库@babel/core负责整合这些功能。
上层功能中，Babel通过polyfill和语法转换支持高级特性向低版本浏览器和环境兼容。@babel/polyfill和@babel/preset-env是实现这些功能的重要工具，前者是core-js和regenerator-runtime的组合，而后者则允许按需加载特性，优化打包体积。
学习Babel对前端架构师来说至关重要，它涉及的底层模块如@babel/plugin-*提供了API接入点，而preset-*如@babel/preset-env则是日常开发中的实用工具。掌握这些，对构建高效、兼容的前端工程至关重要。
参考资料：[1] Babel仓库: github.com/babel/babel/
[2] AST explorer: astexplorer.net/
[3] core-js仓库: github.com/zloirock/core-js/
[4] Browserslist: github.com/browserslist/
[5] Babel v7.4.0: babeljs.io/docs/en/babel/
[6] babel-plugin-syntax-decorators: github.com/babel/babel/
[7] Babel playground: babeljs.io/repl/
