毛腿
毛腿
  • 发布:2020-03-25 01:33
  • 更新:2022-03-17 13:40
  • 阅读:6302

pages.json 解耦 助力 uni-app 模块化编程---uni-dev-tools

分类:uni-app

uni-dev-tools 是什么

uni-dev-tools是一个辅助开发 uni-app 的旁路辅助开发工具。对uni-app原目录设计只做优化,不做侵入。他不是开发框架,也不是插件。
该工具只为简化开发人员工作,优化多人开发模式,负责将pages.json中的配置分解再合并的自动化工作。
解决pages.json混乱的问题。因此pages.json不需要提交,pages.json 将会由其他文件自动合并生成。

pages.json 痛点

1.公有、私有混合,造成模块化开发,移植困难
2.团队开发,多人同时编辑该文件,代码提交,签出遇到若干问题
3.假若系统有50个view,那么pages.json 将会有1公里那么长,问谁能维护?

uni-dev-tools 的愿望

1.满足系统功能模块化;
2.全局与私有解耦合;
3.避免团队开发同时编辑一个文件;
4.方便模块移植;
5.我希望的uni-app框架结构为:pages文件夹为各模块的根目录,其中一个文件夹就是一个模块,里面包含视图层,逻辑层,私有路由配置文件。各功能模块的私有化配置,仅局限在各自的目录下,不与框架目录产生耦合关系。各开发人员的工作空间仅限于当前模块的工作目录。

使用 uni-dev-tools 后,你的 uni-app 目录结构可以这样

目录结构不限于以上,您可以按照自己的习惯,进行构建。如果您需要改造uni-app的目录,请注意下面

uni-dev-tools 监控以下目录

pages config workers sub-packages

uni-dev-tools 监控以下文件

router.json,condition.json,easy-com.json,global-style.json,config.json,tab-bar.json,preload-rule.json,sub-packages.json

所以,只要您的目录是以上目录,并且文件名是以上所列,无论你在json文件中方什么,都会自动合并到pages.json,所以目录结构您可以自己发挥。

因此 uni-dev-tools 干了以下这些事

1.应用根目录下增加了 config 目录,里面存放系统的全局配置文件,比如:condition.json,easy-com.json,global-style.json,tab-bar.json,通过各json文件的文件名可以看出,是对应pages.json 中的 各配置节点。

2.如果存在workers目录,在该目录下生成 config.json ,对应 pages.json 中的 workers 属性配置。

3.应用根目录下创建分包目录 sub-packages,并生成 preload-rule.json 对应 pages.json 中的preloadRule 分包下载规则 属性。今后所有分包都放在这个文件夹下,一个目录一个包,在该包下创建router.json文件,可对应pages.json 中的subPackages属性配置。

4.pages目录中存放主包页面模块,一个文件夹一个模块,该文件夹下的router.json 对应 pages.json 中的 pages 属性配置。

5.如果您对于以上的目录设计不满意,您可以自己进行精简,uni-dev-tools 监控的目录为"pages config workers sub-packages",监控的文件名为"router.json,condition.json,easy-com.json,global-style.json,config.json,tab-bar.json,preload-rule.json",

只要你确保是这项文件名和目录名,配置文件放置的层级结构你可以自定。比如你可以只创建config文件夹,并包配置都放在这个文件夹下,也是可以的啦。不需要强制按照我的目录编排。

6.监控以上各目录文件,发生新建或修改时,自动拉取配置,合并生成 pages.json

你要如何做

转到应用根目录下,运行

npm install uni-dev-tools  
  
//对应用进行初始化,从pages.json 中分解各个属性节点,生成各个配置文件  
npx uni-dev-tools init  
  
//对文件进行监控,自动将各文件中的配置信息合并到pages.json中  
npx uni-dev-tools watch  

第一次

请先进行初始化,将pages.json中的配置分解到各个配置文件,如果不这么做,直接 watch,您的pages.json 有可能会被您创建的空json文件覆盖。

下一步,你可以做什么

删除 pages.json

bug 提交 新需求提交

https://github.com/try520/uni-dev-tools/issues

2 关注 分享
1***@qq.com 1***@qq.com

要回复文章请先登录注册

L***@163.com

L***@163.com

请问下 怎么规定起始页呢
2022-03-17 13:40
TADPOLE

TADPOLE

**确实是一个非常好的工具,因为pages.json的维护问题困扰项目组很久了。**

**但作者似乎已经停止维护了。尝试使用后发现一些小问题一直没有改善。例如:**

1、解析JSON的方式,会丢失条件编译选项。应该改为原样合并,避免丢失条件编译信息。

2、增设一个配置文件,可以实现文件名、结构等内容的自定义

### 受该项目及[uni-merge-pages](https://github.com/SilurianYang/uni-merge-pages/tree/master)的启发,写了一个HBuilderX的插件[Pages-Tool](https://ext.dcloud.net.cn/plugin?name=pages-tool)。

**个人认为使用更简单,功能更灵活。欢迎大家共同讨论完善。**
2021-04-06 14:38
1***@qq.com

1***@qq.com

回复 hhyang :
这个工具有个问题:实现了按模块拼接pages.json,但是其中的"pages"部分只能有一个文件。模块化的主要目的,是将页面路由这个部分进行拆分,tabbar、globalStyle等其实拆不拆分无所谓,本来就没有多少内容。
2021-04-01 12:59
1***@qq.com

1***@qq.com

这是一个非常有创意的工具。但是,建议作者完善如下问题:
1、解析JSON的方式,会丢失条件编译选项。应该改为原样合并,避免丢失条件编译信息。
2、增设一个配置文件,可以实现文件名、结构等内容的自定义
2021-04-01 12:57
hhyang

hhyang

## 试试这个? [uni-merge-pages](https://github.com/SilurianYang/uni-merge-pages/tree/master)
2020-06-27 18:33
毛腿

毛腿 (作者)

回复 9***@qq.com :
开个贴,我服你上墙
2020-04-15 13:06
毛腿

毛腿 (作者)

回复 7***@qq.com :
重命名文件 加前缀 按 字母顺序排列
2020-04-15 12:59
7***@qq.com

7***@qq.com

你好,,,由于pages数组中第一项表示应用启动页,但是用这个工具合并之后的pages.json文件里面第一个不是我之前的启动页了,除了把启动页的路由放到最前面的router.json的方法之外,还有什么更好的办法吗???
2020-04-13 17:07
9***@qq.com

9***@qq.com

搞明白了,pages.js返回的是个过程函数,接受两个参数,一个是content,一个是loader<object>
content就是pages.json的内容,loader是uni-pages-loader开放出来的一个钩子,里面有一个方法addDependency,用来告诉webpack,pages.js还依赖了哪些文件,这样对依赖的文件也可以实行热重载,所有的依赖文件都应该遵循和pages.js一样的模式,返回一个function,并且接收content和loader,并且每个模块都必须对依赖项进行手动的清除缓存
pages.js
```
module.exports=function(pagesJson,loader){
loader.addDependency((require.resolve('./module1.js')))
delete require.cache[require.resolve('./module1.js')]
return {
"pages": [
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "aaaaa"
}
},
...require('./module1.js')(pagesJson,loader)
],
"subPackages":[{
"root": "pages/test",
"pages": [{
"path": "about",
"style": {
"navigationBarTitleText": "测试"
}
}]
}]
}
}

```

module1.js
```
module.exports=function(content,loader){
loader.addDependency((require.resolve('./module-sub1.js')))
delete require.cache[require.resolve('./module-sub1.js')]
return [{
"path": "pages/ccc/ccc",
"style": {
"navigationBarTitleText": "cccc"
},
...require('./module-sub1.js')(content,loader)
}]
}
```
2020-04-07 13:37
9***@qq.com

9***@qq.com

又确认了下,热重载完全没问题,貌似没有缺陷,可以直接愉快的使用pages.js了
2020-04-07 12:17