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

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

　　對比 wepy 和 mpvue

　　當然直接使用原生的有個(gè)顯然的缺點(diǎn)：沒(méi)有了構建。不過(guò)這沒(méi)有關(guān)系，缺什么補上即可。

　　需要構建做什么

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

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

　　Gulp 構建方案

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

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

　　一般來(lái)說(shuō)，運行構建命令，我們都會(huì )從一個(gè)源目錄（src）到一個(gè)目標目錄（dev/dist），但是小程序的 NPM 能力是不允許 node_modules 在根目錄之外的，這就有了沖突�？偛荒芘軅�(gè)任務(wù)拷貝整個(gè) node_modules 到目標目錄吧。

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

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

　　源目錄解決方案

　　對于圖片來(lái)說(shuō)，壓縮完了直接替換原圖是沒(méi)什么問(wèn)題的。

　　對于 CSS 預編譯來(lái)說(shuō)，如使用 postcss，從 CSS 文件到 WXSS 文件比較好解決。但是又引出了兩個(gè)新問(wèn)題：

　　CSS 文件最好是不要打包發(fā)布。

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

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

　　To Base64

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

　　background-image

　　代碼配置

　　最后貼上相關(guān)的代碼配置。

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

　　postcss.config.js

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