微信小程序什么建立？微信小程序需要構(gòu)建做什么？

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

　　對比 wepy 和 mpvue

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

　　需要構(gòu)建做什么

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

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

　　Gulp 構(gòu)建方案

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

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

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

　　微信小程序需要構(gòu)建做什么

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

　　源目錄解決方案

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

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

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

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

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

　　To Base64

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

　　background-image

　　代碼配置

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

　　微信小程序需要構(gòu)建做什么

　　postcss.config.js