[多端开发系列] babel 插件开发实践过程

[hoperyy]

babel 插件开发实践过程

熟悉 babel 插件开发原理

[多端开发系列] babel 插件开发全面理解

引入相关依赖

// @babel/parser 将 script 转译为 ast
const parse = require('@babel/parser').parse;
// @babel/traverse 遍历 ast
const traverse = require('@babel/traverse').default;
// @babel/types 处理 ast 
const t = require('@babel/types');
// @babel/generator 将 ast 还原为代码
const generator = require('@babel/generator').default;

// vue 解析可能需要的
const vueTemplateCompiler = require('vue-template-compiler');

配合工具编写代码

• 可视化 AST，当有目标代码时，可以帮你找到节点的名字：https://astexplorer.net/
• 查找某个节点定义时所需的参数：https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions