babel

Babel 示例插件：处理 AST 替换变量、箭头函数Babel 前段时间听闻后感觉神秘，无从下手？非常理解🧐编写一个示例后，你会发现它只是一个将 ES6 代码转换为 ES5 的 JavaScript 工具，使我们能在不支持 ES6 的环境中运行代码。Babel 的工作是先将代码解析为抽象语法树（AST），然后遍历这棵树，对其节点进行操作，最终生成新的代码

文艺理科生

Webpack项目构建入门：babel的核心角色最近在梳理webpack打包构建的相关内容，本着一起（卷）面对寒冬的心态，把整个思考和分析过程分享出来。各位看官有任何想法都可以在评论区留言，感谢支持~

阿镇吃橙子

由浅入深 ——Vite工具链学习总结在前端的发展过程中，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。我们知道前端构建工具的当下依旧是webpack，那么Vite会是未来吗？

总之就是非常可爱

提升前端开发效率：利用 Babel 实现 JavaScript 文件的定制化修改因为公司前端架构，在一些情况下需要对vue的路由的meta字段新增或删除很多属性，随着项目规模的扩大，如果手动加配置就会变得很麻烦。为了简化这一过程，我们需要对路由进行一些自动化的处理，以提高开发效率。本文将介绍一个基于 Babel 的 nodejs 脚本，用于自动化修改 JavaScript 文件。

小白也能看懂的AST抽象语法树+babel插件开发教程文本babel插件开发将用到babel-cli脚手架环境，并结合一个AST抽象语法树查询网站AST Explorer，让你开发插件时能够快速定位对应js代码的AST节点，并通过几个demo让你快速了解如何开发一个babel插件。

BabelBabel 可以干什么：首先，webpack 中 loader 的本质就是一个函数，接受我们的源代码作为入参同时返回新的内容。

node前端工具实战-svg引入整理工具在之前我们开发了一个node脚手架，实现了node工具项目的快速搭建。现在就来用起这个脚手架来，开发一个小工具来解决一些项目中的问题。

每天写一个BUG

简单玩一玩 Babel我们知道 babel 实际上一款代码编译工具，也就是可以将源代码由一种形式编译成另外一种形式。其实 babel 工作的核心原理很简单：sourceCode - AST - targetCode，也就是将源代码转化成抽象语法树（AST），然后再将 AST 转化成目标代码。

LocatorJS接入入职后发现所在团队的项目内没有接入LocatorJS。这种快速定位页面元素源代码位置的工具对于新人来说用处很大，所以我准备在团队的项目中接入 LocatorJS。

喜欢踢足球的老罗

一个H5页面中直接使用React的示例与说明如题，下面的个简单代码示例—在H5页面中直接使用React将上面代码copy出来，然后用浏览打开，效果如下

Node.js与Webpack中的Babel配置指南在web开发过程中，使用最新的ES6+语法可以显著提高代码的可读性和模块化程度。然而，并不是所有环境都原生支持最新的JavaScript特性，特别是Node.js环境和老旧浏览器。为了解决这一问题，可以借助Babel转译器将ES6+代码转换为向后兼容的JavaScript版本。

昭昭日月明

前端基建：AST 的基本逻辑对于前端来说，ast 就是用 js 对象的方式去描述一种数据结构。ast 编译在构建工具中有大量应用，例如 es6 转 es5、ts 转 js 等等。 ast 编译的过程简单来说可以分为四步：

狂炫冰美式

如何从零实现一个框架编译器？笔者日常使用 Rax 框架开发前端需求。但随着业务扩展，我面临一个头痛的需求：将现有的 Rax 组件适配为 Taro 组件，以实现一些特定商业场景的跨平台功能。

babel: rewrite-import-cli 重写vue-router中的import本文在上一篇内容上进行进一步改造，包装成一个随处可用的 cliwebpack 提供了 require的方式导入模块，但是我们希望统一改为 import的写法

babel: 转换require为 import 写法我们有很多业务系统，在写 vue2的时候，可能路由是 require 写法，我们想改为 import , 当做技术升级，比如从webpack 迁移到 vite 的时候，会更简单。

只有一斤了呐

工程化分享（一）—— babel-runtime 如何缩小打包体积为沉淀工作中的工程化知识点，计划用一个系列来逐一整理相关的内容，想必这是一个长期的过程，希望能一直坚持下去👊！那么第一篇就从 babel-runtime 对包体积优化的作用开头吧。

babel: 将单行声明改为多行-AST当我们遇到代码中有大量如下代码，有时候格式化不一样的时候，是非常头痛的，有没有办法处理？我们希望变成答：有的

babel：轻松将箭头函数转换为普通函数-源码我们写的箭头函数，如果要通过babel转换为普通的function 函数，可以在babel配置中添加

@babel/types从入门到放弃我一直在思考一个问题，为什么线上出现问题时总是难以找到原因呢？每一次都是遇到问题之后，开始排查问题，开始根据报错信息直接去翻看源码（我相信一般的公司应该不会把 sourcemap 打一份放到内网里面），于是翻来覆去一顿操作之后找到了问题，然后紧急发布解决问题；然后每一次出现线上故障都是这样的操作，非常之低效；

小九九的爸爸

手写babel插件-第二讲这是手写babel系列的第二讲。这一讲我们来说说抽象语法树（AST）。今天是2024年大年初一，在这里先祝大家新年快乐，龙年行大运。