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

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

　　對(duì)比 wepy 和 mpvue

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

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

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

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

　　Gulp 構(gòu)建方案

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

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

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

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

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

　　源目錄解決方案

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

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

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

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

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

　　To Base64

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

　　background-image

　　代碼配置

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

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

　　postcss.config.js