皮皮网

1.babel入门学习
2.十问babel，源码用最简单的解析话说清楚babel
3.和昊昊聊前端转译器之parser综合篇
4.Vue Cli项目babel配置解析
5.webpack和Babel常用的基本配置
6.从0开始了解babel配置

babel入门学习

       从我开始接触前端工程化到现在工作一年多，babel这个词就时不时出现在各种代码里，源码但见到了并不意味着就知道了，解析尤其是源码各种babel的包结合起来配置，头都晕了。解析rank函数的源码因此，源码本文旨在加深自己对babel的解析理解，同时为其他学习者提供参考。源码

       babel是解析一个JavaScript解析器，主要任务是源码将不兼容的ES6以上版本的API和语法转换为大部分浏览器都能兼容的ES5。它在前端工程化中扮演着至关重要的解析角色，帮助开发者在新版本的源码JavaScript和旧版浏览器之间架起桥梁。

       在使用babel时，解析配置是源码关键。首先，需要创建一个文件夹和一个`index.js`文件，然后安装`@babel/core`、`@babel/preset-env`以及`@babel/cli`命令工具。在`index.js`文件中随意编写一些ES6的代码，如箭头函数或`Array.reduce`等API。

       接下来，通过`@babel/cli`命令安装的包并不能自动转换代码，需要配置。为此，可以安装`@babel/plugin-transform-arrow-functions`来专门处理箭头函数的转换。通过命令行参数或在`babel.config.js`配置文件中指定插件。

       在配置文件中，使用`@babel/preset-env`可以自动检测环境并进行兼容性转换，如将箭头函数、解构等ES6特性转换为ES5兼容代码。然而，一些高级特性如`reduce`方法可能不会自动转换，需要手动或通过配置调整。

       为了让代码更高效地运行，可以使用`@babel/polyfill`或`core-js`包来解决某些API不兼容的问题。随着版本更新，`@babel/polyfill`已被废弃，推荐使用`core-js`的最新版本。

       `babel.config.js`文件提供了多种配置方式，如直接在命令行中指定参数、通过脚本文件（如`package.json`中的`build`命令）或直接写入配置文件。使用`useBuiltIns`选项可以控制是否引入额外的polyfill，而`entry`选项则用于优化导入和导出的处理，避免重复引入。

       配置文件支持多种格式，如`.json`（推荐）或`.js`，并且可以根据项目需求灵活调整插件和预设。

       关于一些常用的产品源码展示配置，如`@babel/preset-react`和`@babel/preset-typescript`，可以帮助开发者轻松配置React和TypeScript项目。通过在`babel.config.js`中添加相应的预设，可以确保代码在转换过程中保持其特性和类型安全。

       实现自定义babel插件时，需要遵循特定的格式和结构。创建一个插件文件，如`log.js`，可以监听特定的代码结构并执行自定义逻辑。将其引入到`babel.config.js`中，并指定其名称和监听的节点类型。

       `@babel/cli`是命令行工具，用于运行babel转换代码。它的执行路径如`./node_modules/.bin/babel`是基于包的配置。开发者可以根据项目需求在`package.json`中添加自定义命令，以便更方便地执行babel转换。

       在理解了以上基础知识后，你可以开始探索babel的更多高级功能和最佳实践。请确保在项目中合理使用这些工具，以提高代码的可读性和兼容性。如果你觉得本文对你有所帮助，麻烦点个赞以示鼓励。

十问babel，用最简单的话说清楚babel

       Babel，作为前端开发中的关键工具，其核心职责是充当代码转换器。由于浏览器版本差异和兼容性问题，新出现的JavaScript语法和API可能在老版本浏览器中无法识别。为了解决这一困扰，Babel的作用就是将高版本的语法和API转译成浏览器能理解的低版本代码，确保跨浏览器的兼容性。

       配置Babel的babble.config.js可能让人感到困惑，因为其配置选项复杂且多样。配置项包括preset（预设的插件集合）和plugin（额外的插件），它们共同帮助处理JavaScript的转换工作。选择何种配置，通常需要根据实际项目需求和遇到的兼容性问题来决定，实践中遇到问题再进行调整。

       常见的preset如preset-env，它包含了日常开发所需的大部分插件，而react和vue项目通常有自己的预设。Babel/preset-env的核心是其根据配置参数自动转译语法，但不处理ES新API。对于这些API，通常需要借助@babel/polyfill来提供兼容性支持。

       polyfill是一种补丁，用来填充Babel无法处理的API。有两种配置方法：entry引入全部polyfill可能导致代码体积大，深圳源码计算而usage则无法处理第三方依赖的API。为了减少代码体积，@babel/runtime被引入，它提供一个模块化的方式来引入和复用通用方法。

       在实际项目中，选择最佳实践取决于项目的性质。对于应用项目，入口处引入polyfill并启用@babel/plugin-transform-runtime可以帮助控制全局污染。而在类库开发中，应使用@babel/transform-runtime以保持代码的干净和模块化。

       以上内容总结了Babel的基础概念和使用策略，希望对理解这个工具有所帮助。更多详细信息可以参考相关链接的文章和资源。

和昊昊聊前端转译器之parser综合篇

       昊昊，你了解前端领域的转译器吗？

       昊昊：转译器（transpiler）在前端领域用途广泛，比如babel、typescript、terser、eslint、prettier、postcss、posthtml、vue template compiler等。

       我：这些转译器包括了大部分，还有像taro、uniapp这样的基于上述转译器的小程序转译器。当然，也有用rust写的类似babel的swc，以及用go写的esbuild自带的js transpiler，这些不是js写的，我们先不讨论。

       昊昊：转译器的实现原理是什么？

       我：转译器是源码转源码，大致分为三个步骤：parse、transform、generate。

       第一步，parse，将源码解析为抽象语法树AST，通过树形结构记录源码信息，以便计算机理解。

       第二步，transform，解析源码后，进行各种转换，转译器主要工作是转换，对AST进行目的不同的增删改。

       第三步，generate，屏幕相关源码转换后的AST进行递归打印，生成新的代码，并生成源码和目标源码关联关系的sourcemap。

       虽然三个阶段大同小异，但具体名字可能不同，例如vue template compiler中将transform称为optimize，强调优化渲染的转换；postcss第三步被称为stringifier。

       昊昊：你能详细讲讲parse、transform、generate三个阶段吗？

       我：当然，转译器都分为这三个阶段，我们换个角度，分别深入分析parse、transform、generate这三个阶段，纵向对比各种转译器的实现。

       先从JS Parser开始。昊昊，你认为为什么用JS写JS Parser？

       昊昊：是因为前端工程化，有了node后，可以用js写js代码的工具链，包括语法转换、压缩混淆、打包工具等，这些都需要Parser的支持。

       我：确实，工程化工具链驱动了Parser的需求。最早的JS写的Parser是esprima，当时Mozilla公布了SpiderMonkey JS引擎的Parser API和AST标准。esprima基于此实现了Parser。后来形成了estree标准，这是对SpiderMonkey AST的兼容和扩展，最早的实现是esprima。Terser文档中将其称为SpiderMonkey AST。

       昊昊：SpiderMonkey API是参照物，estree是对它的兼容和扩展，最早的实现是esprima。

       我：对，有了esprima这个Parser，许多JS转译工具可以基于它进行开发，比如eslint。eslint早期基于esprima，发展顺利。但随着JS到ES6后，更新速度加快，esprima更新跟不上，导致eslint用户频繁抱怨。于是画画网页源码eslint fork了一份esprima，扩展语法，形成espree，espree自立门户，但也遵循estree标准。后来社区迎来了更快的JS Parser，如acorn，它速度更快，支持新语法，并且支持插件扩展，全面超越了esprima。因此，大量之前基于esprima的工具改用acorn，其中当然包括eslint，在espree2.0后，底层的Parser实现改为acorn。

       acorn的插件机制允许开发者扩展新语法，比如创建一个关键字ssh，实现ssh;使用，这需要注册关键字、注册新语法类型，并在Parser中覆盖相关方法。实现方式并不复杂，完整代码展示了这一过程。

       昊昊：acorn可以扩展新语法，是怎么实现的？

       我：通过acorn插件实现新语法扩展，插件是一个函数，接受旧Parser，返回继承旧Parser的新Parser。新Parser通过重写方法实现扩展。这里以ssh关键字为例，首先修改构造器注册ssh关键字，然后在Parser中注册新语法类型。在parse逻辑中判断是否处理ssh关键字，并进入自定义解析逻辑。实现新语法扩展并不难。

       昊昊：acorn插件机制很棒，还能扩展新语法。除了acorn，还有其他JS Parser有插件机制吗？

       我：印象中没有，如esprima、typescript等没有语法插件，这种扩展只能等待官方实现。

       昊昊：babel、espree等基于acorn，它们做了哪些改动和扩展？

       我：espree仅增加了一些属性，保持estree兼容性。而@babel/parser除了添加节点属性，还扩展了许多新节点，不兼容estree标准，主要修改包括新增节点定义、属性添加等。

       昊昊：其他JS转译器，如prettier、terser的Parser是什么？

       我：prettier基于@babel/parser和typescript，terser有自己的AST标准。terser使用自己标准的原因是其AST方法丰富，有继承关系，而estree标准的AST仅是数据结构。改动成本大，所以terser没有改变。详细原因可以查看官方文章。

       昊昊：其他转译器的Parser？

       我：CSS转译器流行的是postcss，用于增强CSS能力的less、sass等与postcss这类专业转译器定位不同。postcss支持插件机制，默认支持CSS语法扩展。接下来在postcss语法插件中应用一个acorn语法插件，实现CSS支持新JS语法。

       昊昊：把JS新语法编译到CSS，很酷。

       我：不仅是Parser，stringifier也能自定义，比如实现语法高亮等。

       昊昊：HTML的Parser呢？

       我：HTML的Parser与CSS类似，支持各种模板引擎编译为HTML。主要转译器是postcss，其Parser使用htmlparser2。流程与postcss相似，但不支持语法扩展插件，仅支持转换插件。可以拿到某个节点后获取内容，自行解析生成HTML AST，如Markdown转HTML、模板引擎转HTML等。

       昊昊：感觉Parser种类繁多，既有acorn、htmlparser2、postcss等通用Parser，也有各种转译器自带的Parser。

       我：学习时不要只关注使用，了解Parser类型拓宽视野。深入学习Parser需要理解词法分析和语法分析，而不是学习某个Parser的使用。通常不会手写复杂的Parser，比如HTML Parser，可以用如ANTLR的Parser生成器。

       转译的开始在解析阶段，之后的转换与生成才是重头戏。

Vue Cli项目babel配置解析

       在Vue CLI项目中，Babel主要用于将ES+的代码转换为兼容性JavaScript，通过配置文件babel.config.js进行管理。关键配置如@babel/preset-env和@babel/plugin-transform-runtime起着重要作用。

       在项目结构中，@babel/preset-env用于处理新语法的转译，其useBuiltIns选项有三种，其中usage模式是推荐选择，它会在编译时按需引入API转换，以减少资源包大小。但若需确保所有API转换，可以使用entry方式全局引入。

       @babel/plugin-transform-runtime则解决了类和typeof等语法转换时全局变量原型修改带来的问题，它会在运行时引入@babel/runtime-corejs3模块，避免代码中的重复辅助函数。

       在项目开发中，@babel/preset-env配合useBuiltIns通常足够，除非在编写第三方库时，为了不污染使用者环境，才会考虑使用@babel/plugin-transform-runtime。总之，理解并适当地配置Babel配置是确保项目兼容性和代码效率的关键。

webpack和Babel常用的基本配置

       webpack是一个成熟的工具，其核心在于配置、使用和性能优化，虽然在原理上并非最高效，但它被广泛使用。

       为什么需要webpack？这是因为webpack具有其独特的功能，如作用域解析、模块合并等，这些问题在传统的构建工具中难以解决。

       关于webpack5的基本配置，首先需要进行初始化安装，然后使用打包命令进行打包。拆分配置和合并配置可以使项目结构更加清晰，而启动本地服务可以通过dev-server命令实现。

       Modulerule可以解析ES6语法，并将其编译为ES5，这是为了使代码能够在旧浏览器中运行。同时，修改配置文件.babelrc，可以使用@babel/preset-env这一组preset，它能够根据浏览器的环境智能地引入需要的polyfill，从而减少手动管理syntax transform的时间，并减少bundle文件的大小。

       devServer可以解析文件，而Image()函数可以创建一个新的HTMLImageElement实例，其功能等价于`document.createElement('img')`。

       在webpack配置中，使用Image()函数可以有效减少大小，通过使用base可以减少一次mon.js时，可以在postcss-loader中配置自动生成前缀，如postcss.config.js，使得如transform: rotate(-deg)等CSS样式自动添加前缀。

       在高级配置中，可以配置多入口，实现多个页面的输出。同时，可以抽离和压缩CSS，以及抽离公共代码。webpack还可以实现异步加载JS（懒加载），处理React和Vue等框架。

       关于babel，它的作用是将ES6模块化语法编译为ES5，以使代码能够在旧浏览器中运行。在环境搭建和基本配置中，可以在package.json中添加必要的依赖，并在.babelrc中进行基本配置。

       babel-polyfill可以对一些浏览器不支持的函数进行补丁或兼容。@babel/polyfill与core-js关系密切，它可以将core-js与regenerator-runtime一起引入，从而避免打包体积过大。

       babel-polyfill需要按需引入，以避免不必要的功能引入和打包体积过大。babel-runtime则可以将helper和polyfill都改为从一个统一的地方引入，并引入的对象和全局变量是完全隔离的。

       在优化构建速度方面，可以使用缓存、忽略插件、多进程打包、优化压缩等方法。优化产出代码方面，可以开启Tree-Shaking、使用CDN加速、懒加载等方法。

       总结来说，webpack和Babel是前端开发中常用的构建工具和编译工具，它们可以帮助开发者更高效地完成项目构建和代码编译工作。

从0开始了解babel配置

       要深入了解Babel的配置，首先明白@babel/core、@babel/polyfill和@babel/preset-env的不同角色是关键。它们分别是：

       @babel/core：Babel的核心库，负责编译流程的集成和插件、preset管理。

       @babel/cli：Babel提供的命令行工具，便于在终端使用和配置文件生成。

       @babel/preset-env：根据目标环境（target）自动转译和添加polyfill，有corejs、targets等参数。

       @babel/plugin-transform-runtime：处理运行时转换，包括polyfill管理和代码重复使用优化。

       从零开始配置，首先安装基础依赖，如@babel/core和@babel/cli，然后创建测试文件并配置package.json。在.babelrc中添加preset-env，指定转换目标。通过npm run build命令运行，Babel会将ES6+语法转为兼容版本，如const和箭头函数。

       对于polyfill，Babel不能直接转换新特性，需要借助polyfill来填补不同浏览器间的差异。@babel/babel-polyfill曾是解决方案，但已被废弃，建议使用core-js。在项目入口文件中，正确引入polyfills取决于useBuiltIns配置，如entry或usage模式。

       在开发实践中，最佳策略是：对于项目，关闭@babel/plugin-transform-runtime的core-js选项，以减少全局污染并按需引入polyfill。对于库开发，应使用useBuiltIns: false，仅转换语法，避免全局污染，每个文件内按需引入polyfill，利用helpers辅助函数减小体积。

       通过这些配置，你可以更好地与Babel协作，实现代码向后兼容，适应不同浏览器环境。

Babel的presets和plugins配置解析

       Babel，作为下一代JavaScript的编译器，为前端开发提供了兼容性解决方案。由于浏览器版本差异，新JavaScript特性在使用前需先通过Babel编译成老版本浏览器能理解的代码。Babel 6.x版本之后，插件模块化，配置文件.babelrc起到关键作用。

       首先，我们来看presets（预设）。它是一组预先配置好的plugins集合，便于快速引入常用功能。例如，要使用ES的特性，只需安装并配置`babel-preset-es`。预设选项如`env`，提供了针对特定环境（如浏览器版本）的灵活性，通过`targets`、`browsers`等配置。

       以下是几个常用的presets配置：

       - es: 主要包含ES6特性。

       - es: 包括ES7特性。

       - es: 包含ES8特性。

       - latest: 合并了es~es。

       - react: 官方推荐，支持React和Flow语法。

       - stage-x: 根据JavaScript提案阶段划分，从0到4，越小阶段越早。

       对于插件(plugins)，它们是presets中可选的，独立引入。如需编译箭头函数，可直接引入。如`transform-runtime`，提供了运行时帮助函数、polyfill和regenerator，是默认推荐的。`transform-remove-console`则用于移除console.log，有助于代码优化。

       自定义presets和plugins也很灵活，可以直接引用npm包或本地路径。至于编译顺序，plugins和presets会按特定顺序执行。总的来说，合理配置Babel的presets和plugins可以让你更轻松地利用新JavaScript特性，同时保持代码兼容性。