Skip to main content

从零开始开发一个 babel 插件

前言#

近期在做项目的过程中遇到了一个很有意思的问题:

在移动端的项目中有一个调试神器 —— vConsole,用于查看移动端设备上的报错信息。

用法很简单:

yarn add vconsole --save-dev
# 或
npm install vconsole --save-dev

然后在项目的入口文件里引入并实例化:

index.tsx
import VConsole from 'vconsole';
new VConsole();

这样在我们的项目右下角就会有一个 vConsole 的按钮,点击一下就能打开控制台查看报错信息。

但是直接这样使用有一件事情令人非常难受:上线前必须手动注释掉这段代码,避免 vConsole 被打包进线上代码中。

遇到这样的问题应该怎么办?

起初我在思考这个问题应该如何解决的时候,第一个想到的是 Webpack,因为它与项目的打包构建密不可分,是不是能在打包构建的阶段跳过 vConsole,不将其打包进最终的代码中?于是准备写一个 Webpack 插件来解决这个问题(事实上这个思路确实可行,但是解决问题的时机过于滞后,需要到打包构建的阶段才能解决)。

后来仔细思考了一下这个问题,其实不需要到打包构建阶段就能够解决,在编译的阶段就可以移除这部分的代码,最终确定了技术方案:写一个 babel 插件来解决这个问题

本文的所有代码都已上传至 wjq990112/babel-plugin-vconsole 仓库中,方便阅读。

babel 简介#

babel 是一个 JavaScript 的编译器,主要的用途还是为新标准的 JavaScript 语法提供向下兼容的能力,也就是所谓的 polyfill

简单来说,babel 的工作就是:

  • 语法转换
  • 通过 polyfill 方式在目标环境中添加缺失的特性
  • 源码转换

babel 原理#

众所周知,编译器的原理其实就是编译原理,那么整个编译的流程就是这样的:

词法分析 => 语法分析 => 语义分析 => 中间代码生成 => 代码优化 => 代码生成

Last updated on by wjq990112