手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

基于Webpack4.X,小程序工程化落地實踐

2020-8-28    seo達(dá)人

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

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

技術(shù)選型:

在進(jìn)行小程序項目啟動,進(jìn)行技術(shù)選型的時候,對市場上多個小程序框架進(jìn)行了考慮:

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

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

原因:

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

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

引入工程化

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

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

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

  2. 代碼規(guī)范

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

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

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

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

  1. 引入jest單元測試

    • 生成測試覆蓋率

項目結(jié)構(gòu)

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

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

項目使用的包文件

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

項目運(yùn)行

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

 npm run dev. 壓縮圖片    npm run img. 單元測試    npm run test(生成測試報告)    npm run test:watch(監(jiān)聽測試文件改動—開發(fā)環(huán)境下使用)

示例

編譯scss

執(zhí)行 npm run dev

壓縮圖片

執(zhí)行 npm run img

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

新建頁面

執(zhí)行 npm run create

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

新建組件

執(zhí)行 npm run create

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

單元測試

執(zhí)行 npm run test 生成測試報告執(zhí)行 npm run test:watch 監(jiān)聽測試文件,方便開發(fā)使用

其他思考

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

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

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

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

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔