圖解PostCSS的插件執(zhí)行順序

文章其實(shí)是一系列的早就寫完了. 才發(fā)現(xiàn)忘了發(fā)在SegmentFault上面, 最早發(fā)布于https://gitee.com/janking/Inf...

這次我繼續(xù)研究PostCSS的插件的執(zhí)行順序。

之前有研究過做過假設(shè)，在插件列表中，PostCSS的插件執(zhí)行順序自上而下，一切看起來似乎是沒有任何問題的。

我也看過有關(guān)PostCSS解析器的相關(guān)文章，有以下一些收獲：

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

當(dāng)然這張圖并沒有對Plugin System進(jìn)行解釋。

再有：

摘自：深入PostCSS Web設(shè)計(jì)

摘自：寫CSS的姿勢

這兩張圖則應(yīng)該是說明了我之前的假設(shè)，插件中的執(zhí)行順序自上而下。

但是這些資料不明不白的，我決定進(jìn)一步閱讀相關(guān)文章找出真相，不過研究過程中，我也依然深思這樣一個問題，也許我本不應(yīng)該糾結(jié)這個，因?yàn)榛蛟S根本沒有意義？或者這個工作方式并非與PostCSS本身有關(guān)？

于是我又把之前收集的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.

會不會跟這個有關(guān)呢，我先埋個伏筆。

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.

鄙人譯：有一個非常重要的需要考慮的一點(diǎn)是，當(dāng)你在加載PostCSS插件數(shù)組中順序就是你執(zhí)行他們的順序。因此你有必要好好在這個插件列表這下功夫思考一下，來確定你想要的一個接一個的插件執(zhí)行順序。

原文第一句話很復(fù)雜，所以英語不好的理解起來可能有些費(fèi)勁，姑且可以分成以下幾段分別翻譯再合并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.

然后這段原文后也有示例，大家可以自己看看加深理解和認(rèn)識。并且也有一個小結(jié)論：

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.

鄙人譯：你所設(shè)置的每個插件都會被加載的插件順序所影響，因此強(qiáng)烈建議你在某些情況下多做些測試來讓你的插件們運(yùn)行的更加完美~

好了看到這里，其實(shí)答案大致已經(jīng)揭曉，也許你覺得這不是很自然的從上而下么，為何作者要糾結(jié)這么久還寫了這么一篇長篇大論的文章。如果你還沒看過之前我為何糾結(jié)這個順序問題，可以看看:

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

結(jié)論

其實(shí)，關(guān)于順序的疑問我覺得差不多就此打住，也許其中的確有些奇怪的現(xiàn)象，但是這個基本不影響或者說沒有追究其根本的意義，或許真要打破沙鍋問到底就要發(fā)郵件給PostCSS作者了。而作為普通開發(fā)人員，也許沒有必要花太多精力去研究這個，我們知道PostCSS插件的順序一般來說是從上往下執(zhí)行的，不要犯低級的順序錯誤（例如import寫在列表末尾），大部分場景都會得到我們想要的結(jié)果了

（突然想起來了，前面埋了個伏筆其實(shí)跟它沒啥關(guān)系，所以不多做文章了~不過作為課外閱讀，多了解下也是棒棒噠！）

其他

關(guān)于我個人的PostCSS一系列學(xué)習(xí), 介紹及總結(jié), 有興趣可以參閱:

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的PostCSS自学笔记（二）【番外篇二】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。