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

文章图片

前言
书接上回
我们知道 uni-app 和 tarojs 在最终打包成小程序运行的时候，都是使用的 webpack ，所以在这 2 个框架中，我们可以使用 *-loader 轻而易举的赋予它们这方面的能力。
但是，假如我们使用的是原生开发呢？
原生开发的选项
使用微信开发工具的小伙伴们，肯定注意到，在项目详情 -> 本地设置中
有上传代码时样式自动补全自动压缩样式自动压缩混淆等等选项。 【小程序|增强原生小程序开发，构建 wxss 处理最小化工具链】它们的本质，不过是几个插件罢了:
样式自动补全 -> autoprefixer
自动压缩样式 -> cssnano
自动压缩混淆 -> uglify-js/terser
所以我们完全可以自定义，以获得更强更自由的能力。
最小化的自定义样式工具链
1. Scss与Postcss支持
我们知道在 webpack 里 sass-loader postcss-loader babel-loader 这类，只是编译核心们和 webpack 做粘合的胶水代码。
在不使用 webpack gulp rollup ... 这类的打包工具的情况下，我们当然可以去自定义一个最小化的样式编译工具。
首先，直接安装 dart-sass和 postcss
yarn add -D sass postcss
安装后，可以看到 sass 渲染函数签名
// sass函数签名export function render(options: Options callback: (exception: SassException result: Result) => void): void;export function renderSync(options: Options): Result;
然后我们又知道 webpack 的 loader 选择了 compose 方式的执行方式。

函数式编程中 compose 从右到左执行 pipe 从左到右执行

于是我们知道了执行顺序，那么就可以确定 *.scss 文件，先交给 sass 处理，再交由 postcss 处理然后就直接打成 xxpage.wxss 这类局部页面样式又或者打成 app.wxss 作为全局样式。
那么写代码实现就是探囊取物了：
// 不考虑 preset merge的情况下const sass = require('sass')const postcss = require('postcss')const { plugins = require('./postcss.config.js')function handleScss (path) { sass.render({ file: path // fiber: Fiber (err result) => { if (err) { console.error(err) const destPath = path.replace(/\\.scss$/ '.wxss') postcss(plugins).process(result.css { from: path to: destPath ).then(result => { fs.writeFile(destPath result.css () => true) if (result.map) { fs.writeFile(destPath + '.map' result.map.toString() () => true) ) )
上面这段代码就是 scss -> postcss -> wxss 的转化链路