做爲前端開發者，你還不知道什麼是 postCss？

時間 2019-12-06

原文原文鏈接

前言

原諒我取這樣的標題，我知道 postCss 對於大多數前端開發者來講早已經很熟悉了，可是樓主做爲一個初出茅廬的前端er，還有好多的工具和技術沒接觸過，說來慚愧。雖然平時也喜歡使用css預處理器好比 sass、less、stylus，可是關於css的其餘工具確實接觸的少，postCss就是一個例子，因而今天就對它瞭解了一番。若是你對postCss也不是很瞭解，那麼但願這篇博客能夠幫助到你。css

什麼是 postCss？

postCss 不是什麼新玩意，而是一個幾年前就被普遍使用的工具。咱們一般說的 postCss 通常指兩個方面：html

postCss 自己。
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上開源出去。

總結

postCss 自己是一個nodejs module，用於轉換css代碼成一個抽象語法樹，而後咱們能夠利用各類插件實現對css的各類操做。
postCss 既不是預處理器也不是後置處理器，而是相似於babel的角色，作什麼事情取決於使用了什麼插件。
能夠定製本身的插件，實現本身想要的功能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。