Babel处理代码初探

系列文章目录

一文搞定babel转换

---

---

前言

babel让你可以对代码进行为所欲为操作，以下为记录babel的初始尝试处理api接口文件生成适合批量录入菜单权限的结构

转换前
转换后

将注释的安装配置_autoAssign 分为[title]_[key]两部分

---

# 一、Babel是什么？

Babel 是JS编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。简单说就是从一种源码到另一种源码的编辑器！
转换过程：解析->转换->生成。

二、使用步骤

1.引入库

如果项目中未引入则进行安装引入：

npm i @babel/core @babel/parser babel-traverse babel-types -D

2.读入数据

代码如下：

const babel = require('@babel/core');
const path = require('path');
//  原始文件
const UPLOAD_DIR = path.resolve(__dirname, './src/service/api/administrator/configManager.ts'); // 文件存储目录
//  通过babel读取文件代码
const { code } = babel.transformFileSync(UPLOAD_DIR, {});
// 查看一下
console.log(code)

执行node app.js会打印如下结果

---

2.获取当前节点

使用 babel-traverse 去遍历对应的 AST 节点如ObjectProperty
代码如下：

//  解析为 ast
const ast = parser.parse(code, {
    sourceType: 'module',
    plugins: ['dynamicImport'],
});

// 遍历
const traverse = require('babel-traverse').default;

traverse(ast, {
    ObjectProperty(ipath, state) {
        // ObjectProperty 节点
        // 处理节点
});

所有对象都会走到ObjectProperty中，然后我们可以在里面对其进行修改。其中参数 ipath用于访问到当前的节点信息 ipath.node，也可以访问到父节点 ipath.parent

---

3.修改节点

使用 babel-type 去修改操作对应的 AST 节点

• 通过astexplorer查找要操作的结果的节点类型
• 然后去官网搜索该类型

代码如下：

const t = require('babel-types');
traverse(ast, {
    ObjectProperty(ipath, state) {
        // Function 节点
        // do some stuff
        // 处理二级对象节点（leadingComments有值）
        const { node } = ipath;
        if (node.leadingComments) {
            const [key1, key2] = node.leadingComments[0].value.split('_');
            console.log('key', key2);
            // 移除注释
            node.leadingComments = null;
            // 是二级对象使用注释替换名称
            if (key2) {
                node.key.name = key2;
                // 获取原数据对象
                const originValue = node.value;
                // 新建一个list对象
                const list = t.objectProperty(t.identifier('list'), originValue);
                // 新建一个title对象
                const title = t.objectProperty(t.identifier('title'), t.stringLiteral(key1));
                // 创建对象表达式并 替换原有value
                console.log('title', title);

                node.value = t.objectExpression([title, list]);
            }
        }
    },
});

---

4.生成代码并输出

代码如下：

const babel = require('@babel/core');
const fs = require('fs');
// 还原为代码
const { code: redCode } = babel.transformFromAstSync(ast, null, { configFile: false });
fs.writeFile('./code.js', redCode, { encoding: 'utf-8' }, (err) => {
    console.log('写入完成');
});

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Babel的创建，各种插件都是同原理的创建的。可以将其作为babel插件或者loader