编写第一个自已的postCSS插件——一步步填完官方文档中的坑——在vue项目中使用

向右看齐 2023-02-14 10:22 3阅读 0赞

#### 官网教程 ####

[https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin][https_dockyard.com_blog_2018_02_01_writing-your-first-postcss-plugin]

#### 开始实操 ####

1.  克隆官方模板库

git clone git@github.com:postcss/postcss-plugin-boilerplate.git

![在这里插入图片描述][20200602112131951.png]  
按照官方文档，你会遇到上图错误。解决办法，fork官方库之后，再执行git clone，或者直接下载压缩包。

1.  接下来，从该仓库运行向导脚本：

node ./postcss-plugin-boilerplate/start

意思是执行目录下的start.js文件，故，如果你已经进入到目录，执行node start即可。  
**注意：执行node start后会报以下错误**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70]  
根据错误提示，是package.json文件中语法报错，在package.json的行，有一个KEYWORDS，IDE已经给出了错误提示，从官方库的issues找到了答案（看下方截图）。废话不多说，将KEYWORDS干掉，再次执行node start，按着提示输入信息，新成了一个新的库，我的库名叫postcss-my-first。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 1]

1.  打开新项目，在index.js中贴入官方的demo——查找overflow:scroll，并写入-webkit-overflow-scrolling:touch

1.  效果测试  
    打开index.text.js,将注释部分的代码释放出来进入验证  
    input是原始css代码  
    ouput是我们插件处理后的结果  
    在package.json中加上图示语句，不使用eslint进行校验  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 2]  
    index.test.js中的完整代码如下

在控制台运行npm run my-test  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 3]  
测试通过,插件为自动为我们添加了样式-webkit-overflow-scrolling:touch

1.  插件使用
    
    1.  到现在我们只是写好了插件，并验证了插件功能。离项目实际运用还差最后一步。以下以vue-cli创建的项目为例来说明
    2.  要正常使用，首先需将插件包发布到npm，在需要使用的项目中使用npm install 包名，或者直接将项目拷贝到node\_modules目录下。
    3.  通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
    4.  以下示例以该方式使用，在vue-cli项目中postcss.config.js（如无该文件便创建）中引入插件。
    5.  postcss.config.js中的代码如下

module.exports = { 
        plugins: { 
            autoprefixer: { }, 
            '@postcss-my-first': { }
        }
    };

autoprefixer：\{\}为fostcss.config.js中的默认配置，表示启用autoprefixer插件，@postcss-my-first为我这次编写的postCSS插件名，值为空对象表示配置为空。

1.  验证  
    万事具备，进行验证，项目中存在以下class

.login-btn { 
            text-align: center;
            overflow: scroll;
        }

运行项目后，在网页中查看该class，成功！  
![在这里插入图片描述][20200602161642184.png]

[https_dockyard.com_blog_2018_02_01_writing-your-first-postcss-plugin]: https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin
[20200602112131951.png]: https://img-blog.csdnimg.cn/20200602112131951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602134859323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602135458829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200602151505997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200602151914377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA==,size_16,color_FFFFFF,t_70
[20200602161642184.png]: https://img-blog.csdnimg.cn/20200602161642184.png