建信小程序開發工具鏈原理淺析

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"link","attrs":{"href":"http:\/\/mp.weixin.qq.com\/s?__biz=MzI5NDE3ODQyNg==&mid=2247502687&idx=1&sn=2008d5b0a5651be9b1520c83110b2cf6&chksm=ec64504adb13d95cc6017ce473912b7217444a1f461bcdd8dda7ceaec74b25be0645407438e1&scene=21#wechat_redirect","title":"","type":null},"content":[{"type":"text","text":"《初識建信小程序引擎》"}]},{"type":"text","text":"一文中我們瞭解到，建信小程序是一種新的連接用戶與服務的開發方式，可以在建信應用內被便捷的獲取和傳播，同時具備良好的用戶體驗。一般的開發工具，都會有一個供用戶使用的開發工具鏈。那麼，建信小程序的開發工具鏈的原理又是怎樣的呢？本文將會對以上內容進行介紹。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注：本文基於 @jump-mp\/cli 的版本爲 1.2.6"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"開發工具鏈"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"@jump-mp\/cli 的安裝和使用方法詳見建信小程序開發文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在終端運行"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"`$ jump -h`\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以看到 @jump-mp\/cli 中提供如下功能："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"1. `Usage: jump [options]`\n2. \n3. `Options:`\n4. ` **-v, --version** output the version number`\n5. ` **-h, --help** display help for command`\n6. \n7. `Commands:`\n8. ` **init** initialize template for jump project`\n9. ` **build [options]** build project to be used in android or ios`\n10. ` **update** update project dependencies to the latest version`\n11. ` **add [options] ** add npm source for miniproject`\n12. ` **construct** construct installed npm source for miniproject`\n13. ` **help [command]** display help for command`\n\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"init：初始化方法，用於初始化小程序項目和頁面、組件；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"build：用於對建信小程序進行編譯打包；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"update：用於更新建信小程序使用的依賴版本；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"add：用於添加小程序依賴；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"construct：用於構建小程序添加的依賴。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"腳手架原理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在上一節中，已經介紹了 "},{"type":"codeinline","content":[{"type":"text","text":"@jump-mp\/cli "}]},{"type":"text","text":"的基本功能。本節將對腳手架 "},{"type":"codeinline","content":[{"type":"text","text":"@jump-mp\/cli "}]},{"type":"text","text":"的整體架構和技術選型進行介紹。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"現有腳手架技術分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前較常用的前端開發腳手架工具有 "},{"type":"codeinline","content":[{"type":"text","text":"yoeman"}]},{"type":"text","text":"、"},{"type":"codeinline","content":[{"type":"text","text":"vue-cli "}]},{"type":"text","text":"等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"yeoman "}]},{"type":"text","text":"搭建項目需要提供 "},{"type":"codeinline","content":[{"type":"text","text":"yoeman-generator"}]},{"type":"text","text":"。"},{"type":"codeinline","content":[{"type":"text","text":"yoeman-generator "}]},{"type":"text","text":"本質上就是有 i 個具備完整文件結構的項目樣板，用戶需要手動地把這些 "},{"type":"codeinline","content":[{"type":"text","text":"generator "}]},{"type":"text","text":"下載到本地，然後 "},{"type":"codeinline","content":[{"type":"text","text":"yoeman "}]},{"type":"text","text":"就會根據這些 "},{"type":"codeinline","content":[{"type":"text","text":"generator "}]},{"type":"text","text":"自動生成各種不同的項目。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vue-cli "}]},{"type":"text","text":"提供了相當豐富的選項和設定功能，但是其本質也是從遠程倉庫把不同的模版拉取到本地，而並非是“本地生成“的黑科技。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"綜上，目前腳手架的思路大都是建立不同的樣板項目，然後腳手架根據用戶指令引用樣板項目生成實際項目。樣板項目可以內置在腳手架中，也可以部署在遠程倉庫。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"技術選型及架構"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}