小程序|增强原生小程序开发，构建 wxss 处理最小化工具链( 二 ) path

而且还可以在里面，随意的装 postcss plugin 比如 autoprefixer cssnano tailwindcss 之前笔者写的 tailwindcss-miniprogram-preset 也可以无缝的嵌入这套机制中去，给原生小程序使用。
2. 文件监控
我们开发的时候，会经常去创建，修改，删除文件，这么获取到这些 timing 对文件进行重新编译呢？
fs.watch ， fs.watchFile 固然可以，不过更推荐的还是 chokidar

yarn add -D chokidar

在 chokidar 的 README.md 中详细介绍了它的优势，这里不再叙述。
const watcher = chokidar.watch(`${someGlob` { ignored: /(^|[\\/\\\\
)\\../ persistent: true)// EventEmitter 的写法把监控安排的明明白白watcher .on('add' (pathstats) => { // 添加文件 ) .on('change' (pathstats) => { // 修改文件 ) .on('unlink' (pathstats) => { // 删除文件 ) .on('error' error => { // 发生错误 ) .on('ready' () => { // watch ready after add files )
通过 watcher 的持续性监控，我们可以很容易得出结论我们需要在 *.scss 文件变动的时候，重新编译，
即 addchange 的时间点在 unlink 的时间点，也要同时 unlink 对应的 *.wxss 文件。

假如 purgecss 开启，则需要在 wxml 文件发生变更时通知重新编译 app.scss 和文件对应的 page.scss一般开发时不开启此工具。

3. IDE智能提示设置
前面这一套机制，搭建完成后
在 app.scss 里加一行 @tailwind utilities; 就可以顺利使用 tailwindcss 了
但是我们需要我们的编辑器根据 tailwindcss 配置，自动生成 class 的智能提示怎么做呢？
这里我们以 vscode 为例:

安装 WXML - Language Services 插件(一搜wxml下载量最多的就是了)
安装 Tailwind CSS IntelliSense 插件

接着找到 Tailwind CSS IntelliSense 的扩展设置
在 include languages手动标记 wxml 的类型为 html

如图所示智能提示就出来了:

智能提示是不是非常方便，同时也能大大提升开发效率。
代码工程化方案
其实这篇文章，拆开了 webpack 的部分黑盒，探讨了场景定制化的代码加工生产线，以期来帮助开发者提升效率。
typescript + @babel/core + rollup 这种处理js的组合也见过。
只要能提升开发者生产效率，提升开发体验，提升可维护性的工具还是值得一做的。
附录