rabowl——umi-qiankun微服务框架企业实践(3)

## 目录结构解析 这里不赘述`umi`的相关内容。只讲`rabowl`框架新增重要的目录结构 ``` rabowl ---- libraries ---- rbui ---- src ---- components ---- rbutils ---- es ---- lib ---- src ---- packages ---- App1 ---- App2 …… ---- config.json ---- rabowl ---- src ---- bin ---- src ---- app.ts ---- .umirc ---- tsconfig.json ---- .gitignore ``` #### 项目结构  #### 主目录 主目录也是主应用的项目目录，主要使用`umijs`的框架。 * .umirc文件 项目配置还是在`.umirc`。对于`@umi-qiankun`的配置，大家可以去`umi`官网查看。 这里只说明一下我改动的地方 ``` export default defineConfig({ ... chainWebpack(config: any) { config.module .rule('js') .test(/\.(js|mjs|jsx|ts|tsx)$/) .include.add( path.join(__dirname, 'libraries', 'rbui', 'src', 'components'), ) .end() .exclude.add(/node_modules/) .end() .use('babel-loader'); }, alias: { '@rbui': path.join(__dirname, 'libraries', 'rbui', 'src', 'components'), '@rbutils': path.join(__dirname, 'libraries', 'rbutils', 'es'), }, qiankun: { master: { // 注册子应用信息 apps: [{ name: 'App1', // 唯一 id entry: isDev ? 'http://localhost:8001' : '/webs/app1/index.html', // html entry },], }, }, ... } ``` `chainWebpack`的配置是为了让`webpack`能正确的将引入的公共组件库`rbui`中的组件打包到项目中。 `alias`可以让项目中使用公共组件库`rbui`和公共配置库`rbutils`。 其他子应用中也有这样的配置。 * src/app.ts 主应用的主代码都在`src`目录下，主应用和子应用的通信可以在`app.ts`文件中配置`useQiankunStateForSlave`。例如： ``` import './index.less'; import './mixin.less'; import { useState } from 'react'; import { getGlobalInfo } from './services'; import { useMount, usePersistFn } from 'ahooks'; export function useQiankunStateForSlave() { const [globalState, setGlobalState] = useState({ config: undefined }); const setGlobaConfig = usePersistFn((state: any) => { setGlobalState({ ...globalState, ...state }); }); useMount(() => { getGlobalInfo().then(async (currentUser: any) => { setGlobaConfig({ currentUser }); }); }); return { globalState, setGlobaConfig, }; } ``` 注意一定要将`setGlobalState`封装后再传给子应用，否则子应用无法将参数传给主应用。 * tsconfig.json 为了让`ts`能正常的解析`rbui` 和 `rbutils` 需要为他们配置一下 ``` { ... "paths": { "@/*": ["src/*"], "@@/*": ["src/.umi/*"], "@rbui/*": ["./libraries/rbui/src/components/*"], "@rbui": ["./libraries/rbui/src/components/"], "@rbutils/*": ["./libraries/rbutils/es/*"], "@rbutils": ["./libraries/rbutils/es/"] }, .. } ``` 这一点其他子应用中也类似。 * .gitignore 这里是关于`git `的配置。通过项目结构我们可以清除，在`git `库管理上，主应用、`rabowl` 命令、`rbui`、`rbuitls`项目都是在主`git `库中的。 而其他子应用应该有自己的git库，主应用不能管理他们的代码。所以在主应用的`.gitignore`需要将子应用排除掉。 ``` /packages/App1/** #不能使用 # /packages ``` 每次新增子应用都需要在这里注册一下。 如果是通过`rabowl`命令`rabowl cca --app xxx`新建的话会自动注册 因为我们需要使用`packages`目录下的`config.json`。所以不能直接屏蔽整个`packages`目录。 `注意：.eslintrc.js和stylelintrc.js 整个项目最好只有一个，子应用不要配置。但是tsconfig.json最好都配置` #### rabowl 目录 这里是`rabowl`命令行工具的项目 `rabowl`工具如下 ``` 指令: cca (create-clid-app) 创建子应用 Options: --app 要创建的子应用名称 --targetDir 子应用所在目录，默认是 ./packages clean 删除子应用或者删除文件文件夹 Options: --app 要删除的子应用名称 --name 要删除的文件或文件夹 --targetDir 子应用所在目录，默认是 ./packages cm (create model) 生成 dva model 文件 Options: --name 生成文件名称或路径，以当前路径为基准 --demo 是否需要实例数据 1 为是 0 为否 非必填 crf (create react function component) 生成 react 函数组件文件 包含 index.tsx index.less Options: --name 生成文件名称或路径，以当前路径为基准 crc (create react class component) 生成 react 类组件文件 包含 index.tsx index.less Options: --name 生成文件名称或路径，以当前路径为基准 clear 删除所有应用的依赖 node_modules 文件夹 init 初始化项目，会根据packages目录下的 config.json 使用 git clone 所有子应用到对应的目录下 ready 初始化项目，会根据packages目录下的 config.json 使用 git clone 所有子应用到对应的目录下，不给应用安装依赖。 gitadd 针对所有应用的修改 执行 git add . gitcommit 针对所有应用的修改 执行 git commit Options: --m 代码提交信息 gitpush 针对所有应用的修改 执行 git push gitpull 针对所有应用 执行 git pull gitcheckout 针对指定的应用 执行 git checkout Options: --app app 目录名称，不指定就是主应用 --branch 需要切换的目标分支 gitlog 针对指定的应用 执行 git log Options: --app app 目录名称，不指定就是主应用 ``` `rabowl`命令的使用方法，后续文章会介绍。这里说一下`rabowl`目录结构。 源码在`rabowl/src`下，所有命令注册在`index.ts`里面，功能在其他`ts`文件中。使用者可以根据自己的需要对函数进行修改。修改完成后必须打包才能生效。可以在`rabowl`目录下执行`npm run build `打包；或者在主目录下执行` npm run build:cli`。 #### libraries目录 `libraries`目录下是公共组件`rbui`项目和公共配置`rbutils`项目，属于公共目录，可以对整个项目进行统一配置和减少重复开发。 * rbui 项目公共组件库采用 `umi` 框架开发。如果直接启动项目，可以在项目中开发基础组件，其他子项目中通过相对路径引用组件。组件都在`src/components`目录下。开发完成的组件可以在`src/components/index.ts`里面注册。如果不在这里注册，引用的时候就需要指定具体的目录。例如： ``` // 如果在 src/components/index.ts 注册了组件 export { default as Icon } from './Icon'; // App1 import { Icon } from '@rbui' // 如果没有注册组件 // App1 import Icon from '@rbui/Icon' ``` * rbutils 是公共配置提供者。暴露一些公共参数给所有的应用使用，当你需要修改某些配置或公共参数时就不需要每个项目都去改了。参数都写在`src`下可以写在不同的文件中最后注册在`src/index.ts`里面。添加了新的参数后，需要打包才能让其他应用使用。可以在当前应用下使用`npm run build` 或者在主应用下使用`npm run build:utils`。 如果是构建阶段需要使用公共参数请使用相对路径`../../libraries/rbutils/lib/index`引用。如果是组件中使用公共参数，直接用`@rbutils`来引用 #### packages目录 packages下是所有的子应用 * config.json管理子应用的状态 ``` //packages/config.json [ { "name": "App1", // 应用名称 也是子应用的文件夹名称 大驼峰 "version": "1.0.0", // 版本号，没有实际作用 "git": "http://xxx.xxx.xx/app1.git", // git 库地址 "gitName": "app1", // 对应git 库名称 "active": true, // 是否启用，如果active为false,那么在 rabowl ready时将不会被下载 "branch": "V1.0.0" // git 分支 } ] ``` 以上参数，除了`version` 其他都是必须的。 特别注意： `active` 字段如果为false 那么 使用`rabowl`的命令行都不会去操作这个子应用，包括代码保存和提交，初始化应用，打包，启动应用等。但是你可以自己配置相关的命令行。 * 子应用们 每个子应用单独一个文件夹，可以通过`rabowl`的命令`yarn rabowl cca --app AppName `来生成子应用。 每个子应用都是使用的umi框架并在`.umirc.ts`中配置了`qiankun`的`slaver`属性 ``` export default defineConfig({ ... chainWebpack(config: any) { config.module .rule('js') .test(/\.(js|mjs|jsx|ts|tsx)$/) .include.add(path.join(__dirname, '..', '..', 'libraries', 'rbui', 'src', 'components')) .end() .exclude.add(/node_modules/) .end() .use('babel-loader'); }, qiankun: { slave: {}, }, ... alias: { '@rbui': path.join(__dirname, '..', '..', 'libraries', 'rbui', 'src', 'components'), '@rbutils': path.join(__dirname, '..', '..', 'libraries', 'rbutils', 'es'), }, ... outputPath: '../../dist/webs/app1', publicPath: './', ... }); ``` `outputPath`配置之后，所有子应用在打包后，静态文件都会打包到主应用下的`dist`文件夹下。这样和主应用的 `qiankun `配置对应上，部署的时候可以一起部署，节省了部署的时间。