微信小程序需要构建做什么

由于小程序更新迭代速度很快，而且我们的技术栈是 react 全家桶，所以在对比 wepy 和 mpvue 之后，我们选择了直接使用原生小程序。

工具/原料

Gulp 构建

微信小程序开发工具

对比

1、对比 wepy 和 mpvue图如下：

2、当然直接使用原生的有个显然的缺点：没有了构建。不过这没有关系，缺什么补上即可。

需要构建做什么

1、一般来说，我们需要构建主要是用来做这些工作：ES6/7 转 ES5、NPM 包管理、组件化、 CSS 预编译、图片压缩、打包合并等。

2、而这些能力除了CSS 预编译和图片压缩之外，其他的功能小程序默认已经提供了。所以一个小巧的小程序构建只需要支持CSS 预编译和图片压缩即可。

Gulp 构建方案

1、既然只涉及到一些任务的处理，那么使用 gulp 是最合适不过的了。对于 CSS 预编译，有 gulp 对应的 s锾攒揉敫ass、less、postcss 插件可选；对于图片压缩，可以使用 gulp 的 imagemini 插件，再装上各种图片的格式对应的压缩库即可。

2、一般来说，运行构建命令，我们都会从一个源目录（src）到一个目标目录（dev/dist），但是小程序的 NPM 能力是不允妓罹鐾岭许 node_modules 在根目录之外的，这就有了冲突。总不能跑个任务拷贝整个 node_modules 到目标目录吧。

3、既然不能使用从一个源目录（src）到一个目标目录（dev/dist），那就只好在源目录就地解决了。

源目录解决方案

1、对于图片来说，压缩完了直接替换原图是没什么问题的。对于 CSS 预编译来说，如使用 postcss，从 CSS 文件到 WXSS 文件比较好解决。但是又引出了两个新问题：CSS 文件最好是不要打包发布。最好避免误修改 WXSS 文件，而是直接修改 CSS 文件。第一个我们可以在项目配置文件中设置上传代码的时候过滤 CSS 文件；第二个我们可以在 VSCode 编辑器中隐藏 WXSS 文件，避免误操作。

2、To Base64既然有了构建，当然希望还能把一些缺失的能力补上。如 background 不支持本地图片。对于这个 postcss 也有相关的插件能解决：background-image

代码配置

1、最后贴上相关的代码配置。

2、postcss.config.js