webpack处理文件内容——babel插件保姆级教学

2020-10-30 本文已影响0人景阳冈大虫在此

本文目标

探究编写一个babel插件，将代码里的http:转成https:

前言

webpack的babel原理好多博客都有讲，Babel 插件手册里面说

Babel 的三个主要处理步骤分别是：解析（parse），转换（transform），生成（generate）

解析步骤接收代码并输出 AST。这个步骤分为两个阶段：词法分析（Lexical Analysis）和 语法分析（Syntactic Analysis）。

转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。

代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。

其实就是code->AST->对AST操作->生成code

那么问题来了，如何对AST进行操作？

AST

用这个网站可以将代码转成AST：https://astexplorer.net/

代码
有链接的情况一种是定义了一个变量然后给他赋值，一种是直接跳转。

const AURL = 'http://XXXXX';
const BURL = 'http://XX.XXX';
function jump(path) {
    window.location.href = path;
}
jump(AURL);
window.location.href = 'http://XXXXX';

效果

还挺好使的 - -

在这里就是我想处理的内容

简单说
这段代码里声明并赋值了一个值为链接的变量，然后从这个AST里我知道了这个语句的type为VariableDeclaration，babel的插件可以针对type为这个的节点做处理

开始写插件

Visitors访问者

写一个自己的插件之前，还记得怎么给babel使用插件吗？来复习一下吧。假设我们的插件即将放在根目录的plugins文件夹里，叫tran-http-plugin

在webpack.config.js里

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]
}

在.bablerc或者是babel.config.json里有plugins属性

 "plugins": ["plugins/tran-http-plugin"]

然后我们写一下插件内容，我喜欢边调试边写，插件书写规则大致如下
a. 导出一个函数，函数返回体是一个对象
b. visitor是访问者，可以在这个对象里面定义访问节点的方法
c. 想处理什么类型的节点，就找出他们的名字，作为属性将方法写在visitor里。
举个例子：
比如说Identifier就是一种节点的类型，它翻译过来就是识别码。
代码里有一个声明语句，声明了变量AURL并对其赋值。
那么这个语句的语法树里会有Identifier这个节点，并且node.name="AURL"。我们可以在这里对变量名做一些修改操作。

module.exports = function ({ types: t }) {
    return {
        visitor: {
            Identifier(path) {
                console.log('Visiting: ' + path.node.name);
            },
            VariableDeclaration(path, state) {
                console.log('VariableDeclaration');
            },
        },
    };
};

调试
调试这个脚本，类似于调试node一样，很简单。不会的可以参考这篇。
观察控制台
观察节点
直观感受，就是访问到声明语句的时候才会进VariableDeclaration里。
再展开，要改的部分其实是里面的StringLiteral，那么我们就可以在这里面对这个节点进行操作。

因为这是个语法树的关系，所以我们要用操作语法树的方法去操作节点。

改变节点

在上一个环节我们找到了想改的内容

关键点

思路

建一个一样的节点，然后替换他！

构建节点

这里我们用到的是@babel/types 插件，各种节点的说明文档在此。
~~这个文档反正挺惜字如金的~~

以这个赋值语句为例分析

const AURL = 'http://XXXXX';

如何快速定位？变量声明节点的构成是什么？
如果打开文档，就会发现节点多得数不清，完全不晓得我们要从哪里下手去构建这个声明语句的node。

在写代码之前，我们先了解一下赋值语句的语法节点构成吧。

对于赋值语句，可以从断点的那个path看出关键词。搜一下declarations这个单词，有且只有两个相关节点。

variableDeclaration：t.variableDeclaration(kind, declarations)
variableDeclarator：t.variableDeclarator(id, init)

得出推论
a. 一个变量声明语句节点为variableDeclaration，kind为这个变量的类型，var、const这种，declarations是一个数组（Array<VariableDeclarator>）。
b. 每一个VariableDeclarator拥有自己的id和init属性。从调试结果来看，在这个赋值语句中，id就是Identifier节点，init是StringLiteral节点。

综上，一个赋值语句的语法树会出现variableDeclaration、VariableDeclarator、Identifier、StringLiteral这四种节点。
————————
赋值语句节点伪代码如下

variableDeclaration(kind,[
    VariableDeclarator(Identifier,StringLiteral)
])

怎么写
我们要操作的其实是stringLiteral，这里是等号右边那个值。把这个字符串替换掉。
在上面的截图里也有体现了，完整代码如下

// tran-http-plugin.js
module.exports = function ({ types: t }) {
    return {
        visitor: {
            Identifier(path) {
                console.log('Visiting: ' + path.node.name);
            },
            StringLiteral(path) {
                var node = path.node;
                var oldVal = node.value;
                var matchRes = oldVal.match(/http:\/\/([\w.]+\/?)\S*/);
                var newVal = '';
                if (!matchRes) return;
                newVal = oldVal.replace(/http:\/\//g, 'https://');
                path.replaceWith(t.StringLiteral(newVal));
            },
        },
    };
};

打包结果

源文件

const AURL = 'http://XXXXX';
const BURL = 'http://XX.XXX';
function jump(path) {
    window.location.href = path;
}
jump(AURL);
window.location.href = 'http://XXXXX';

转换后

参考资料：
babel脚本文档
 https://zhuanlan.zhihu.com/p/84799735
https://www.jianshu.com/p/7c8c5ae1e4be
https://www.csdn.net/gather_2b/MtTacg0sMzQwNzYtYmxvZwO0O0OO0O0O.html
https://www.jianshu.com/p/44c0075fd043