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

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

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",
  6. 只要你确保是这项文件名和目录名，配置文件放置的层级结构你可以自定。比如你可以只创建config文件夹，并包配置都放在这个文件夹下，也是可以的啦。不需要强制按照我的目录编排。
  7. 监控以上各目录文件，发生新建或修改时，自动拉取配置，合并生成 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


更多关于uni-app pages.json 解耦 助力模块化编程---uni-dev-tools的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app pages.json 解耦 助力模块化编程---uni-dev-tools的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app项目中，pages.json 文件是配置页面路由和页面属性的核心文件。随着项目规模的扩大，pages.json 可能会变得臃肿且难以维护。为了助力模块化编程，我们可以考虑解耦 pages.json，将配置信息分散到各个模块或组件中，并在构建时合并这些配置。

以下是一个简单的示例，展示如何通过脚本在构建过程中动态生成 pages.json，从而实现配置的解耦。

  1. 创建配置模块

首先，我们为各个页面创建独立的配置文件。例如，pagesConfig/ 目录下可以放置多个 JSON 文件，每个文件对应一个页面配置。

// pagesConfig/home.json
{
  "path": "pages/home/home",
  "style": {
    "navigationBarTitleText": "Home"
  }
}

// pagesConfig/about.json
{
  "path": "pages/about/about",
  "style": {
    "navigationBarTitleText": "About"
  }
}
  1. 编写构建脚本

接下来，我们编写一个 Node.js 脚本，用于读取这些配置并生成最终的 pages.json。

const fs = require('fs');
const path = require('path');

const pagesDir = path.join(__dirname, 'pagesConfig');
const pagesConfigFiles = fs.readdirSync(pagesDir).filter(file => file.endsWith('.json'));

let pages = [];

pagesConfigFiles.forEach(file => {
  const config = JSON.parse(fs.readFileSync(path.join(pagesDir, file), 'utf8'));
  pages.push(config);
});

const pagesJson = {
  "pages": pages,
  "globalStyle": {
    // 全局样式配置
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#000000",
    "backgroundColor": "#ffffff"
  }
};

fs.writeFileSync(path.join(__dirname, 'pages.json'), JSON.stringify(pagesJson, null, 2), 'utf8');
  1. 运行构建脚本

在 package.json 中添加一个脚本命令，以便在需要时运行此构建脚本。

{
  "scripts": {
    "build:pages": "node buildPages.js"
  }
}

然后，你可以通过运行 npm run build:pages 来生成 pages.json。

  1. 集成到开发流程

你可以将构建脚本集成到开发流程中，例如在每次代码提交（commit）或推送（push）时自动运行，或者在开发环境启动前运行。

通过这种方式，我们将 pages.json 的配置解耦到各个独立的配置文件中，提高了项目的可维护性和模块化程度。当然，根据项目的实际情况，你可能需要进一步完善脚本，比如处理错误、支持更多的配置选项等。

回到顶部