PostCSS自學筆記（二）【番外篇二】

圖解PostCSS的插件執行順序

文章實際上是一系列的早就寫完了. 才發現忘了發在SegmentFault上面, 最先發佈於 https://gitee.com/janking/Inf...

此次我繼續研究PostCSS的插件的執行順序。

以前有研究過作過假設，在插件列表中，PostCSS的插件執行順序自上而下，一切看起來彷佛是沒有任何問題的。

我也看過有關PostCSS解析器的相關文章，有如下一些收穫：

摘自：PostCSS 是個什麼鬼東西？

固然這張圖並無對Plugin System進行解釋。

再有：

摘自：深刻PostCSS Web設計

摘自：寫CSS的姿式

這兩張圖則應該是說明了我以前的假設，插件中的執行順序自上而下。

可是這些資料不明不白的，我決定進一步閱讀相關文章找出真相，不過研究過程當中，我也依然深思這樣一個問題，也許我本不該該糾結這個，由於或許根本沒有意義？或者這個工做方式並不是與PostCSS自己有關？

因而我又把以前收集的PostCSS的文章翻了一遍，咱們再來一個個過一遍。

POSTCSS PLUGIN INSTALLATION EXAMPLE

先來看看一片來自smashingmagazine的這段POSTCSS PLUGIN INSTALLATION EXAMPLE

In the array, we can include the necessary require statements that return the plugins and that are then called immediately. If you would like to read more about this concept, look through 「 Functions as First-Class Citizens in JavaScript」 by Ryan Christiani.

會不會跟這個有關呢，我先埋個伏筆。

PostCSS Quickstart Guide: Exploring Pluginsd

再來看看另外一篇PostCSS Quickstart Guide: Exploring Pluginsd的Plugin Execution Sequence中這段

One of the main considerations you have to make when loading up the array of PostCSS plugins is the order in which you run them. You’ll have to pause and think through your list, determining if one plugin might need to run after another in order to do what you want it to.

鄙人譯：有一個很是重要的須要考慮的一點是，當你在加載PostCSS插件數組中順序就是你執行他們的順序。所以你有必要好好在這個插件列表這下功夫思考一下，來肯定你想要的一個接一個的插件執行順序。

原文第一句話很複雜，因此英語很差的理解起來可能有些費勁，姑且能夠分紅如下幾段分別翻譯再合併One of the main considerations you have to make when loading up the array of PostCSS plugins is the order in which you run them.

而後這段原文後也有示例，你們能夠本身看看加深理解和認識。而且也有一個小結論：

The load order for plugins is something that will change with each set of plugins, so you may find you just need to do a little experimentation sometimes to get everything working together nicely.

鄙人譯：你所設置的每一個插件都會被加載的插件順序所影響，所以強烈建議你在某些狀況下多作些測試來讓你的插件們運行的更加完美~

好了看到這裏，其實答案大體已經揭曉，也許你以爲這不是很天然的從上而下麼，爲什麼做者要糾結這麼久還寫了這麼一篇長篇大論的文章。若是你還沒看過以前我爲什麼糾結這個順序問題，能夠看看:

• PostCSS自學筆記（二）【插件篇】#CSSNANO
• PostCSS自學筆記（二）【番外篇一】

結論

其實，關於順序的疑問我以爲差很少就此打住，也許其中的確有些奇怪的現象，可是這個基本不影響或者說沒有追究其根本的意義，或許真要打破沙鍋問到底就要發郵件給PostCSS做者了。而做爲普通開發人員，也許沒有必要花太多精力去研究這個，咱們知道PostCSS插件的順序通常來講是從上往下執行的，不要犯低級的順序錯誤（例如import寫在列表末尾），大部分場景都會獲得咱們想要的結果了

（忽然想起來了，前面埋了個伏筆其實跟它沒啥關係，因此很少作文章了~不過做爲課外閱讀，多瞭解下也是棒棒噠！）

其餘

關於我我的的PostCSS一系列學習, 介紹及總結, 有興趣能夠參閱:

• PostCSS自學筆記（一）【安裝使用篇】
• PostCSS自學筆記（二）【插件篇】
• PostCSS自學筆記（二）【番外篇一】
• PostCSS自學筆記（二）【番外篇二】