前言
前端技术的飞速发展，让我们的工作更加高效和便捷。在这个过程中，npm 包成为了前端开发中重要的工具，我们可以利用 npm 包快速搭建工程、引入库、使用插件等等。
其中，preact-cli-plugin-atomizer 是一个 npm 包，它是一个分析你的项目中使用了哪些 CSS 类名的插件，可以帮助你的项目更加规范和清晰。
那么，如何使用 preact-cli-plugin-atomizer 呢？本文将会详细介绍这个 npm 包的使用方法，帮助你更快地上手使用这个插件。
正文
安装
首先，我们需要安装 preact-cli-plugin-atomizer。使用 npm 命令：
npm install --save-dev preact-cli-plugin-atomizer
配置
接下来，我们需要配置 preact-cli-plugin-atomizer。
- 在 preact.config.js 文件中，添加以下代码：
const atomizerConfig = require('./path/to/config.js');
export default function (config) {
config.plugins.push(require('preact-cli-plugin-atomizer')(atomizerConfig))
return config
}这里需要注意，atomizerConfig 相当于配置文件，我们需要在后面的步骤中创建它。
- 创建 atomizerConfig 配置文件。
在项目根目录下，创建 atomizerConfig.js 文件。这个文件可以定义你需要的规范样式。
-- -------------------- ---- -------
-------------- - -
-- -----
------- -
-- --------
-------- ------------ ----
--
-- ---
----------- ---------
-这里我们定义了一个 "a-red" 的自定义类，该类名对应的样式为 "background: red"，然后 classNames 数组列出了所有要分析的类。
使用
现在，我们就可以使用 preact-cli-plugin-atomizer 来分析我们项目中使用的类名。
- 修改 package.json 文件，加入以下命令：
{
"scripts": {
"build:css": "preact build --no-prerender && atomizer && postcss ./build/bundle.css --use autoprefixer --output ./build/bundle.css",
...
},
...
}这里我们的命令为 build:css，运行该命令可以得到一个 build/bundle.css 文件，其中包含了所有的样式。
- 运行该命令：
npm run build:css
- 打开 build/bundle.css 文件，可以看到里面包含了所有我们的项目中使用的规范样式。
结语
经过了以上的介绍和示范，我们已经可以掌握 preact-cli-plugin-atomizer 的使用方法了。这个插件可以帮助我们更加快速地编写规范的 CSS 样式，提高项目的开发效率和可维护性。
进一步的，我们可以根据自身的需要，结合 preact-cli-plugin-atomizer 的其他配置项，定制自己更加适用的规范样式。
如果你对这个插件感兴趣，不妨花些时间去了解它的详细情况，相信它能为你的项目带来更多的收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9c81e8991b448e75c1