微信小程序什么建立？微信小程序需要構建做什么？由于小程序更新迭代速度很快，而且我們的技術棧是 react 全家桶，所以在對比 wepy 和 mpvue 之后，我們選擇了直接使用原生小程序。

　　對比 wepy 和 mpvue

　　當然直接使用原生的有個顯然的缺點：沒有了構建。不過這沒有關系，缺什么補上即可。

　　需要構建做什么

　　一般來說，我們需要構建主要是用來做這些工作：ES6/7 轉 ES5、NPM 包管理、組件化、 CSS 預編譯、圖片壓縮、打包合并等。

　　而這些能力除了CSS 預編譯和圖片壓縮之外，其他的功能小程序默認已經提供了。所以一個小巧的小程序構建只需要支持CSS 預編譯和圖片壓縮即可。

　　Gulp 構建方案

　　既然只涉及到一些任務的處理，那么使用 gulp 是最合適不過的了。

　　對于 CSS 預編譯，有 gulp 對應的 sass、less、postcss 插件可選；對于圖片壓縮，可以使用 gulp 的 imagemini 插件，再裝上各種圖片的格式對應的壓縮庫即可。

　　一般來說，運行構建命令，我們都會從一個源目錄（src）到一個目標目錄（dev/dist），但是小程序的 NPM 能力是不允許 node_modules 在根目錄之外的，這就有了沖突。總不能跑個任務拷貝整個 node_modules 到目標目錄吧。

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

　　既然不能使用從一個源目錄（src）到一個目標目錄（dev/dist），那就只好在源目錄就地解決了。

　　源目錄解決方案

　　對于圖片來說，壓縮完了直接替換原圖是沒什么問題的。

　　對于 CSS 預編譯來說，如使用 postcss，從 CSS 文件到 WXSS 文件比較好解決。但是又引出了兩個新問題：

　　CSS 文件最好是不要打包發布。

　　最好避免誤修改 WXSS 文件，而是直接修改 CSS 文件。

　　第一個我們可以在項目配置文件中設置上傳代碼的時候過濾 CSS 文件；第二個我們可以在 VSCode 編輯器中隱藏 WXSS 文件，避免誤操作。

　　To Base64

　　既然有了構建，當然希望還能把一些缺失的能力補上。如 background 不支持本地圖片。對于這個 postcss 也有相關的插件能解決：

　　background-image

　　代碼配置

　　最后貼上相關的代碼配置。

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

　　postcss.config.js

　　在云里，為各行業商戶搭建自己的小程序。微信號：zaiyunli002