此篇为webpack处理文件内容——编写postcss8.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
网友评论