webpack处理文件内容——编写postcss8.0插件

前言

本文旨在编写出postcss8.0插件，将css中的http:替换成https:。

AST

把代码转成AST：https://astexplorer.net/#/2uBU1BLuJ1

代码

.hello {
    color: green;
    font-size: 64px;
    background:url(http://xxxxxxx) no-repeat fixed;
    background-size: 100% auto;
}

AST

background

我们要分析的这个backaground节点的type为decl。
AST节点类型
实际上PostCSS将CSS解析为节点树之后，节点有5种type

Root：树顶部的节点，代表CSS文件。
AtRule：语句以@like@charset "UTF-8" 或@media (screen) {}。开头
Rule：内部带有声明的选择器。例如input, button {}。
Declaration：键值对，例如color: black；
Comment：独立评论。选择器中的注释，规则参数和值存储在节点的raws属性中。

————
为什么要更新postcss呢？
postcss 8.0有好多很棒的改进，详细的看PostCSS 8.0:Plugin migration guide。

比如之前运行插件，即使只改了一点点，它也会遍历CSS包的整个抽象语法树，如果有很多个PostCSS插件就会遍历很多次，速度慢。

所以这次的大版本还是十分值得更新的。
————

配置

我的插件叫postcss-tran-http-plugin，这个postcss-是那个官方文档强调的命名方式。

特别地
现在postcss 8.0改变了写插件的方式，如果之前项目有装过postcss，可以卸了装个新的。

npm uninstall postcss
npm install postcss --save-dev

webpack.config.js
use的执行顺序是右到左

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ]
}

package.json

{
  "peerDependencies": {
    "postcss": "^8.0.0"
  }
}

peerDependencies是为了cover这个场景：
有人要用我写的postcss插件，需要安装postcss。用这个方法去指定我所要求的那个postcss版本，以避免版本不匹配可能造成的bug。

postcss.config.js
之前这个plugins是个对象，打包出错特地翻了一下文档才发现变成数组了。

module.exports = {
    plugins: [
          require('./plugins/postcss-tran-http-plugin.js')
    ]
}

插件编写

module.exports = (opts) => {
    return {
        postcssPlugin: 'postcss-tran-http-plugin',
        Declaration(decl) {
            console.log('Declaration');
            let oldVal = decl.value;
            if (oldVal.match(/http:\/\/([\w.]+\/?)\S*/)) {
                let newVal = oldVal.replace(/http:\/\//g, 'https://');
                decl.value = newVal;
            }
        },
    };
};
module.exports.postcss = true;

简单说一下
跟babel插件一样，针对不同的type类型有不同的处理函数。
上面我们说到这个节点类型为Declaration，也就是键值对。
读值用decl.value，然后给他直接赋值成新的值就ok了。

结果

代码

// style.css 
body {
    background: darkcyan;
}
.hello {
    color: green;
    font-size: 64px;
    background:url(http://xxxxxxx) no-repeat fixed;
    background-size: 100% auto;
}

打包后

写postcss插件其实还好，节点类型不多，修改也简单。
值得关注的就是升级到8.0之后postcss.config.js、插件编写、依赖库的引用都有变动。

参考：
今天！从零开始调试webpack PostCSS插件
 Writing a PostCSS Plugin
http://echizen.github.io/tech/2017/10-29-develop-postcss-plugin
https://www.cnblogs.com/wonyun/p/9692476.html

最后编辑于：2020.10.31 11:16:47