packages

背景

小程序原生的app.json中定义了pages域,用于注册app中所有用到的pages,
这个设计能够cover绝大部分个人开发的场景,但是当我们在开发一个团队协作的大型项目时,某个开发者可能会依赖其他开发者提供的单个或几个页面/组件来进行开发。

为此,我们引入了packages的概念来解决依赖问题。

后来微信原生增加了 分包加载 能力,因此我们也在package机制中增加了对原生分包加载的支持。

我们提供的包能力本质是对业务的拆分合并,即开发时候可以各自开发,打包时候合为一个,和微信的分包不相同,推荐在此基础上进一步使用平台原生分包能力,可以更好地控制小程序体积。

使用方法

我们拓展了app.json的语法,新增了packages域,用来声明依赖的packages,packages可嵌套依赖。

  1. // @file src/app.mpx
  2. <script type="application/json">
  3. {
  4. "pages": [
  5. "./pages/index/index"
  6. ],
  7. "packages": [
  8. "{npmPackage || relativePathToPackage}/index"
  9. ]
  10. }
  11. </script>
  12. // @file src/packages/index.mpx
  13. <script type="application/json">
  14. {
  15. "pages": [
  16. "./pages/other/other",
  17. "./pages/other/other2"
  18. ]
  19. }
  20. </script>

打包结果:dist/app.json

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/other/other",
  5. "pages/other/other2"
  6. ]
  7. }

由上可见,经过我们的编译过程,packages中注册的页面按照原始的路径形状被合并到主app中, 这样依赖的开发者可以不用考虑自己在被依赖时页面路径是怎么样的,也可以直接将调试用的app.mpx作为依赖入口直接暴露出去, 对于主app的开发者来说也不需要了解依赖内部的细节,只需要在packages中声明自己所需的依赖即可

注意事项

  • 依赖的开发者在自己的入口app.mpx中注册页面时对于本地页面一定要使用相对路径进行注册,否则在主app中进行编译时会找不到对应的页面
  • 不管是用json还是mpx格式定义package入口,编译时永远只会解析json且只会关注json中的pages和packages域,其余所有东西在主app编译时都会被忽略
  • 由于我们是将packages中注册的页面按照原始的路径合并到主app当中,有可能会出现路径名冲突。
    这种情况下编译会报出响应错误提示用户解决冲突,为了避免这种情况的发生,依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。

例如一个包叫login,建议包内页面文件目录为:

  1. project
  2. app.mpx
  3. └───pages
  4. └───login
  5. page1.mpx
  6. page2.mpx
  7. ...