建信小程序开发工具链原理浅析

{"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}}]}