目录结构解析
这里不赘述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
项目结构
20211011102327.png
主目录
主目录也是主应用的项目目录，主要使用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 <appName> 要创建的子应用名称
--targetDir <targetDir> 子应用所在目录，默认是 ./packages
clean 删除子应用或者删除文件文件夹
Options:
--app <appName> 要删除的子应用名称
--name <fileName> 要删除的文件或文件夹
--targetDir <targetDir> 子应用所在目录，默认是 ./packages
cm (create model) 生成 dva model 文件
Options:
--name <name> 生成文件名称或路径，以当前路径为基准
--demo <demo> 是否需要实例数据 1 为是 0 为否 非必填
crf (create react function component) 生成 react 函数组件文件 包含 index.tsx index.less
Options:
--name <name> 生成文件名称或路径，以当前路径为基准
crc (create react class component) 生成 react 类组件文件 包含 index.tsx index.less
Options:
--name <name> 生成文件名称或路径，以当前路径为基准
clear 删除所有应用的依赖 node_modules 文件夹
init 初始化项目，会根据packages目录下的 config.json 使用 git clone 所有子应用到对应的目录下
ready 初始化项目，会根据packages目录下的 config.json 使用 git clone 所有子应用到对应的目录下，不给应用安装依赖。
gitadd 针对所有应用的修改 执行 git add .
gitcommit 针对所有应用的修改 执行 git commit
Options:
--m <msg> 代码提交信息
gitpush 针对所有应用的修改 执行 git push
gitpull 针对所有应用 执行 git pull
gitcheckout 针对指定的应用 执行 git checkout
Options:
--app <app> app 目录名称，不指定就是主应用
--branch <branch> 需要切换的目标分支
gitlog 针对指定的应用 执行 git log
Options:
--app <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配置对应上，部署的时候可以一起部署，节省了部署的时间。
