小程序開(kāi)發(fā)現(xiàn)狀:

1. 開(kāi)發(fā)工具不好使用(無(wú)法熱更新，編譯緩慢)；
2. 無(wú)法使用css預(yù)處理語(yǔ)言(Sass、Less)，有些IDE的插件可以監(jiān)聽(tīng)編譯，但不同編輯器需要額外安裝；
3. 無(wú)法使用工程化(圖片自動(dòng)壓縮，文件監(jiān)聽(tīng)編譯等)；
4. 編碼繁瑣(創(chuàng)建一個(gè)頁(yè)面，需要新建4個(gè)文件(.wxml、.js、.json、.wxss),每次新建都需要新建4次或者復(fù)制文件比較浪費(fèi)時(shí)間)；
5. 團(tuán)隊(duì)多人協(xié)作，代碼風(fēng)格、使用的編輯器不一致；

技術(shù)選型：

在進(jìn)行小程序項(xiàng)目啟動(dòng)，進(jìn)行技術(shù)選型的時(shí)候，對(duì)市場(chǎng)上多個(gè)小程序框架進(jìn)行了考慮:

• uni-app、mpVue、wepy、taro、 kbone

團(tuán)隊(duì)成員mpvue、wepy、uni-app都有實(shí)際的項(xiàng)目經(jīng)驗(yàn),且根據(jù)Github上的star數(shù)還有issue,最后決定回到到使用原生開(kāi)發(fā)。

原因:

雖然框架有些很成熟，有工程化和跨端的解決方案，也有實(shí)際的上線項(xiàng)目，但考慮到后續(xù)一些支撐性的問(wèn)題(維護(hù)，文檔，坑等)，在github上看了issue，有些已經(jīng)沒(méi)在維護(hù)了。

想著讓項(xiàng)目持續(xù)迭代，不受第三方框架限制，保持穩(wěn)健，最后決定使用原生，跟著官方的迭代升級(jí)，自己維護(hù)，引入前端工程化的思想，提高繁瑣的流程以及開(kāi)發(fā)效率。

引入工程化

1. 基于Webpack4.x,自定義Webpack配置

   • scss編譯為wxss：定義全局變量,使用公共的樣式文件,提高css開(kāi)發(fā)效率和可維護(hù)性；

   • 自動(dòng)壓縮圖片資源 : 小程序?qū)Π笮∮邢拗疲瑝嚎s圖片大小可以減少空間，加快頁(yè)面加載；普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網(wǎng)站，壓縮完再保存下來(lái)，效率比較低?，F(xiàn)在執(zhí)行命令就可以自動(dòng)壓縮圖片。

2. 代碼規(guī)范

   • eslint: 能在js運(yùn)行前就識(shí)別一些基礎(chǔ)的語(yǔ)法錯(cuò)誤，減少不必要的小問(wèn)題，提高調(diào)試效率；

   • husky、line-staged、prettier: 統(tǒng)一團(tuán)隊(duì)代碼規(guī)范: 當(dāng)執(zhí)行代碼提交到git倉(cāng)庫(kù)時(shí)，會(huì)將已改動(dòng)文件的代碼格式化統(tǒng)一規(guī)范的代碼風(fēng)格;

1. 命令行創(chuàng)建頁(yè)面和組件模板

   • 小程序每次新建頁(yè)面或者組件，需要依賴4個(gè)文件(.wxml,.js,.wxss,.json)。只需要執(zhí)行npm run create命令，會(huì)提示選擇創(chuàng)建頁(yè)面還是組件，選擇完成輸入頁(yè)面或者組件的名字，會(huì)自動(dòng)生成4個(gè)模板文件(.wxml,.js,json,.scss)到對(duì)應(yīng)的目錄

1. 引入jest單元測(cè)試

   • 生成測(cè)試覆蓋率

項(xiàng)目結(jié)構(gòu)

app -> 小程序程序的入口，使用微信開(kāi)發(fā)者工具制定app目錄cli -> 生pages和components的模板腳手架img ->

 圖片資源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改動(dòng)，容易有沖突，將scss文件傳到服務(wù)器就好了).prettierrc.js(代碼格式化風(fēng)格配置)babel.config.jsjest.config.js(單元測(cè)試配置文件)webpack.compress.js(指定入口圖片資源文件，將圖片壓縮編譯到小程序的資源目錄)webpack.config.js -> (工程化入口文件,指定入口scss文件，監(jiān)聽(tīng)文件變化，自動(dòng)將scss編譯為wxss)

項(xiàng)目使用的包文件

• webpack、babel、eslint: 轉(zhuǎn)換、規(guī)范js
• chalk: console.log打印彩色顏色
• scss、css-loader: 編譯scss
• figlet: 控制臺(tái)顯示字體樣式
• husky,line-staged,prettier: 代碼格式化相關(guān)
• jest、miniprogram-simulate: 單元測(cè)試

項(xiàng)目運(yùn)行

. 安裝依賴    npm install 或 yarn install. 編譯scss   

 npm run dev. 壓縮圖片    npm run img. 單元測(cè)試    npm run test(生成測(cè)試報(bào)告)    npm run test:watch(監(jiān)聽(tīng)測(cè)試文件改動(dòng)—開(kāi)發(fā)環(huán)境下使用)

示例

編譯scss

執(zhí)行 npm run dev

壓縮圖片

執(zhí)行 npm run img

將圖片壓縮到app/assets/img目錄下,一張7k的圖片變成5k，肉眼看不出有什么差別。

新建頁(yè)面

執(zhí)行 npm run create

終端會(huì)提示選擇頁(yè)面還是組件,選擇頁(yè)面,按Enter鍵，輸入頁(yè)面的名稱，會(huì)自動(dòng)將4個(gè)文件創(chuàng)建到app/pages/xxx下。

新建組件

執(zhí)行 npm run create

終端會(huì)提示選擇頁(yè)面還是組件,選擇組件,按Enter鍵，輸入組件的名稱，會(huì)自動(dòng)將4個(gè)文件創(chuàng)建到app/components/xxx下。

單元測(cè)試

執(zhí)行 npm run test 生成測(cè)試報(bào)告執(zhí)行 npm run test:watch 監(jiān)聽(tīng)測(cè)試文件，方便開(kāi)發(fā)使用

其他思考

工程化的初衷就是為了減少重復(fù)性的操作，提高編碼的效率和樂(lè)趣。

JavaScript是弱類型語(yǔ)言，好處是靈活，壞處是太靈活(多人協(xié)作，維護(hù)別人寫的代碼就是很痛苦了)。

項(xiàng)目最主要的是穩(wěn)健，可高度自定義拓展，不拘束于版本和地上那方，特別多人協(xié)作的團(tuán)隊(duì)，工程化能給團(tuán)隊(duì)帶來(lái)更多的收益，后續(xù)也會(huì)考慮將TypeScript等其他好的方案引入項(xiàng)目。

藍(lán)藍(lán)設(shè)計(jì)( m.jjddy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)