做为前端开发者，你还不知道什么是 postCss？

时间  2019-11-08 标签 做为 前端 开发者 还不 知道 什么 postcss

前言

原谅我取这样的标题，我知道 postCss 对于大多数前端开发者来讲早已经很熟悉了，可是楼主做为一个初出茅庐的前端er，还有好多的工具和技术没接触过，说来惭愧。虽然平时也喜欢使用css预处理器好比 sass、less、stylus，可是关于css的其余工具确实接触的少，postCss就是一个例子，因而今天就对它了解了一番。若是你对postCss也不是很了解，那么但愿这篇博客能够帮助到你。css

什么是 postCss？

postCss 不是什么新玩意，而是一个几年前就被普遍使用的工具。并且咱们极可能已经无心或有意的使用到了它，咱们一般说的 postCss 通常指两个方面：html

  1. postCss 自己。
  2. postCss 衍生的生态系统，好比各类插件。

postCss 自己是一个JavaScript 模块，它会读取咱们的css代码，而后将它们转化为一个 抽象语法树 （abstract syntax tree）。它仍是一个插件系统，它提供了一些api，开发者能够基于这些 api 开发插件。前端

postCss 将咱们的css代码转为抽象语法树后，咱们可使用各类的插件去实现各类的功能，最后会转化为字符串输出到一个文件中。这里的插件能够是已存在的插件，也能够是按本身须要本身定制的插件。node

postCss 的定位

postCss 属于 预处理器 (preprocessor) 吗？仍是属于 后置处理器 (postprocessor) ？都不是，由于 postCss 具体作的事取决于开发者使用了什么插件。它能够经过相应的插件去实现相似 sass 等预处理器的功能，如： precss；也能够经过相应的插件执行后置处理器的工做，如：autoprefixer。webpack

这里作一个我以为比较恰当的类比，css 中的 postCss 至关于 JavaScript 的 babel；css 中的 sass，less，stylus 等预处理器至关于 Typescript，虽然不是彻底合理，可是仍是比较恰当。git

如何使用 postCss

其实咱们不少时候都无心的使用到了 postCss，autoprefixer 就是一个例子，这个插件的功能就是自动的为咱们的css代码加上对应的前缀，以便兼容更多的浏览器，不少脚手架都会使用到这个插件。postCss 如何使用呢？使用方法 总的来讲就是根据本身的构建工具或生产环境进行对应的配置。以 webpack 为例：github

// 使用postcss-loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}
复制代码
// 创建对应的配置文件 postcss.config.js，使用对应的插件实现对应的功能。
module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}
复制代码

如何根据本身须要定制一个 postCss 插件？

虽然如今postCss的插件已经很是丰富了，可是有时候仍是须要本身写一个插件来知足本身的需求，下面来逐步说一下如何本身定制一个postCss插件。web

插件效果

处理前：npm

div {
    color: mycolor
}
复制代码

处理后：json

div {
    color: crimson
}
复制代码

这个插件的功能就是将咱们 css 文件中的 mycolor 变量替换为 赤红色 crimson。

准备

假设咱们用的构建工具是 webpack。先简单的搭建一个webpack的工做环境：webpack 起步

// 新建文件夹 webpackStarterProject 而后运行
npm init -y
npm install --save-dev webpack webpack-cli
npm install --save-dev style-loader css-loader postcss-loader
复制代码

文件目录

// webpackStarterProject root path
node_modules
index.js
style.css
index.html
package.json
webpack.config.js
复制代码

而后 webpack.config.js 的配置与上面的配置基本一致。

const path = require('path')
// 使用postcss-loader
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

复制代码

index.js 文件加入如下代码：

// index.js 
import './style.css';
复制代码

style.css 文件加入如下代码：

div {
  color: mycolor
}
复制代码

index.html 文件加入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    what is my color ?
  </div>
  <script src="./dist/bundle.js"></script>
</body>
</html>
复制代码

到这里咱们的工做环境搭建完毕，开始编写本身的postCss插件。

开始编写插件

一般状况下，咱们使用第三方插件的时候，都是经过npm将第三方插件包下载到项目的node_modules中来使用，这里由于咱们是本身编写插件，因此直接在 node_modules 中加入本身要编写的插件。在 node_modules 中新建文件夹 postcss-myplugin 来编写咱们的插件。

// webpackStarterProject root path
node_modules
  |--- postcss-myplugin
index.js
style.css
index.html
package.json
webpack.config.js
复制代码

进入postcss-myplugin 文件夹，运行如下命令：

npm init -y
npm install --save postcss
复制代码

在 postcss-myplugin 文件夹中新建一个 index.js，并加入一下代码：

const postcss = require('postcss');
// 使用 postcss.plugin 方法建立一个插件
module.exports = postcss.plugin('myplugin', function myplugin() {
 
    return function (css) {
    // 此插件的功能将在这里添加。
 
    }
 
});
复制代码

而后在 webpackStarterProject 根目录下添加postcss配置文件 postcss.config.js：

module.exports = {
  plugins: [
  // 引用咱们的插件
    require('postcss-myplugin')
  ]
}
复制代码

当前主要文件结构为：

// webpackStarterProject root path
node_modules
   |--- postcss-myplugin
          |---node_modules
          |---index.js
index.js
style.css
index.html
package.json
webpack.config.js
postcss.config.js
复制代码

接下来咱们就能够继续去实现本身插件的功能了，postCss提供了一系列的 api 方便咱们开发插件 PostCss Api。 给插件添加功能：

const postcss = require('postcss');

module.exports = postcss.plugin('myplugin', function myplugin() {

    return function (css) {
      css.walkRules(rule => {
      // 遍历规则节点
        rule.walkDecls((decl) => {
          // 遍历声明节点
          let value = decl.value;
          if (value.indexOf('mycolor') != -1) {
          // 将 mycolor 变量替换为 crimson
            decl.value = value.replace('mycolor', 'crimson')
          }
        })
      })
    }
 
});
复制代码

大功告成！最后在package.json的script字段中添加如下命令：

"start": "webpack --config webpack.config.js"
复制代码

运行命令打包代码，在浏览器中查看效果：

npm start
复制代码

最后插件也能够再处理一下而后发布到npm上开源出去。

总结

  1. postCss 自己是一个nodejs module，用于转换css代码成一个抽象语法树，而后咱们能够利用各类插件实现对css的各类操做。
  2. postCss 既不是预处理器也不是后置处理器，而是相似于babel的角色，作什么事情取决于使用了什么插件。
  3. 能够定制本身的插件，实现本身想要的功能。
联系我们 沪ICP备2021010478号-7