在前端开发中，PostCSS已经成为了一个非常流行的工具。它是一个基于JavaScript的CSS处理器，可以通过编写插件来自动化完成各种任务。detective-postcss就是PostCSS的一个插件之一，它可以帮助我们查找CSS中包含的所有样式文件，以便进行后续处理。
安装
使用npm安装detective-postcss很简单，只需要在终端中执行以下命令即可：
npm install detective-postcss --save-dev
注意，这里我们使用--save-dev参数将detective-postcss作为开发环境的依赖项进行安装，因为它只用于构建和打包过程中。
使用方法
安装完成后，我们就可以在PostCSS中使用detective-postcss插件了。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - -----------------------------
----- --- - -
------- ------------------
------- --------------------
---- -
----------------- -----
-
--
---------
-----------------
-------------
------------ -- -
-----------------------------
-- -- ----- ------------- ----- ----------------- -- - ----- ------------- ----- ------------------- --
---在这个示例中，我们首先引入了postcss和detective-postcss两个模块，并定义了一个包含两个@import语句和一些CSS规则的字符串。然后，我们使用postcss()函数创建了一个PostCSS处理器实例，并使用.use()方法将detective-postcss插件添加到处理器中。接着，我们调用.process()方法来对CSS进行处理，并使用.then()方法获取处理结果。
在控制台输出的结果中，我们可以看到detective-postcss插件找到了两个样式文件，并将它们作为依赖项返回了一个数组。
深入理解
虽然detective-postcss看起来非常简单，但其实它背后涉及到了一些比较复杂的机制。下面是一些关于该插件的深入讨论。
扫描模式
在默认情况下，detective-postcss会扫描CSS文件中包含的所有@import和url函数，并把它们当做样式依赖项。不过，我们也可以通过options参数来更改这个默认行为。例如，如果我们只想查找@import语句，可以这样做：
.postcss()
.use(detective({ mode: 'sync', word: '@import' }))在这个示例中，我们把options对象传递给了detective()方法，其中mode属性指定了扫描模式，word属性指定了要查找的关键词。这里我们将mode设置为'sync'，表示只扫描同步的@import语句。
除了'sync'之外，detective-postcss还支持'async'和'all'两种扫描模式。'async'表示只扫描异步的@import语句，'all'表示同时扫描同步和异步的依赖项。
自定义解析器
除了默认的扫描模式外，detective-postcss还支持自定义解析器。这个特性非常有用，因为它可以让我们处理一些无法通过正则表达式匹配的样式依赖项。例如，如果我们想查找使用了Sass函数的样式文件，可以这样做：
const detectiveSass = require('detective-sass');
.postcss()
.use(detective({ parser: detectiveSass }))在这个示例中，我们首先引入了detective-sass模块，并把它作为解析器传递给了detect
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45445