图解PostCSS插件执行顺序文章其实是很久以前写的系列文章。才发现忘记贴在SegmentFault上了,最先发在https://gitee.com/janking/Inf...这次继续研究PostCSS插件的执行顺序。之前的研究已经做出了假设。在插件列表中,PostCSS插件的执行顺序是从上到下,一切似乎都没有问题。也看了PostCSS解析器的相关文章,有如下收获:摘自:PostCSS到底是什么?当然,这张图并没有说明PluginSystem。又一次:摘自:深入PostCSS网页设计摘自:WritingCSSPosture这两张图应该说明了我之前的假设,插件中的执行顺序是从上到下。但是这些材料都不清楚,我决定去阅读相关文章一探究竟,但是在研究的过程中,我还是琢磨着这样一个问题,也许我不应该纠结于此,因为也许没有意义在所有?或者它的工作方式与PostCSS本身无关?于是把之前收集的PostCSS文章翻了一遍,下面一一梳理一下。POSTCSS插件安装示例让我们看一下来自smashingmagazine的这个POSTCSS插件安装示例。在数组中,我们可以包含必要的require语句,这些语句返回插件,然后立即调用。如果您想了解更多关于这个概念的信息,请阅读RyanChristiani的“FunctionsasFirst-ClassCitizensinJavaScript”。会不会和这个有关,我先埋下伏笔。PostCSSQuickstartGuide:ExploringPluginsd让我们看看本节中的另一篇PostCSSQuickstartGuide:ExploringPluginsd'sPluginExecutionSequence当加载PostCSS插件数组时,你必须考虑的主要问题之一是你运行它们的顺序。您将不得不暂停并仔细考虑您的列表,确定一个插件是否需要一个接一个地运行才能执行您想要的操作。加载的PostCSS插件数组中的顺序是您执行它们的顺序。因此,您需要仔细考虑这个插件列表,以确定您希望一个一个执行插件的顺序。原文第一句很复杂,如果英文不好可能看不懂。暂且分作以下几段,分别翻译后再合并。在加载一系列PostCSS插件时,您必须考虑的主要因素之一是运行它们的顺序。然后原文末尾有例子,大家可以自己看看,加深理解和理解。还有一个小结论:插件的加载顺序会随着每组插件而变化,因此您可能会发现有时只需要做一些实验就可以让所有东西很好地协同工作。每个插件都会受到插件加载顺序的影响,所以强烈建议大家在某些情况下多做测试,让自己的插件运行的更完美~嗯,看到这里,答案已经出来了粗略透露一下,也许你觉得这不是从上到下自然而然的吗?为什么作者要奋斗这么久,写出这么长的文章。如果你之前没看出我为什么纠结这个顺序,你可以看看:PostCSS自学笔记(二)【插件篇】#CSSNANOPostCSS自学笔记(二)【外文一】结语其实关于顺序的问题我觉得差不多就到此为止吧,可能会出现一些奇怪的现象,但这基本不影响或者不追究它的根本意义,也??许如果你真的想打破砂锅问最后,您必须向PostCSS作者发送电子邮件。作为一个普通的开发者,或许没有必要花太多的精力去研究这个。我们知道PostCSS插件的执行顺序一般是从上到下执行的。不要犯低级顺序错误(比如在列表末尾导入)。有的场景会得到我们想要的结果(突然想起前面的铺垫与它无关,就不多发文章了~不过作为课外读物,多学点还是不错的!)其他关于我的个人PostCSS系列学习介绍和总结,有兴趣的可以参考:PostCSS自学笔记(一)【安装与使用】PostCSS自学笔记(二)【插件】PostCSS自学笔记(二)【外篇一】PostCSS自学笔记(二)【专题二】
