@rapidark/choerodon-boot
v2.0.2
Published
Choerodon Scaffold to run react application.
Downloads
13
Maintainers
Readme
主要功能
@choerodon/boot
为猪齿鱼前端提供了模块的启动/打包,以及子模块的组合功能。
使用
1. 安装依赖
yarn add @choerodon/boot
2. 创建配置文件
在项目目录/react目录下创建config.js
module.exports = {
modules: [
'.',
]
};
3. 添加命令
在package.json添加
"scripts": {
"start": "node --max_old_space_size=4096 node_modules/@choerodon/boot/bin/choerodon-front-boot-start --config ./react/config.js",
"dist": "choerodon-front-boot dist --config ./react/config.js"
},
常用运行配置及配置项说明
| 名称 | 值类型 | 用途 | 默认值 |
| ------------- | ------------------------------------- | --------------------------------------- | ---------------------------------------------- |
| port | number | 前端启动时的端口 | 9090 |
| modules | Array | 指定启动的子模块,其中.
指代自身子模块 | |
| webpackConfig | (config:webpackConfig)=>webpackConfig | 自定义webpack配置 | |
| entry | string | 应用入口文件 | node_modules下的@choerodon/master/lib/entry.js |
| theme | Object | 全局覆盖less变量 | {} |
| titlename | string | html的title | Choerodon | 多云应用技术集成平台 |
更多配置请查看链接
子模块路由收集
1. 配置方式
猪齿鱼前端具有子模块组合功能,猪齿鱼前端可分为分前端
和总前端
,分前端指代各个子模块,这些子模块在启动时一般会启动自身,这时需要配置modules
为['.']
,总前端是子模块的聚合,modules
配置为子模块的名称列表,如:
const config = {
local: true, //是否为本地开发
modules: [
'@choerodon/base',
'@choerodon/asgard',
'@choerodon/notify',
'@choerodon/manager',
"@choerodon/agile",
"@choerodon/testmanager",
"@choerodon/knowledge",
"@choerodon/devops",
"@choerodon/code-repo",
"@choerodon/prod-repo",
]
};
module.exports = config;
2. 约定
猪齿鱼前端子模块应遵守以下约定
- 在package.json中配置唯一的
routeName
和main
和install
(可选)字段 - main指定了一个文件路径,这个文件应有一个默认导出
3. 路由分配
每个在modules中配置的子模块都会被分配一个一级路由,路由分配规则是读取子模块的package.json
中的routeName
字段,并引入main
字段配置的文件,所以请保证不同的子模块配置了不同的routeName
。
例如针对以下package.json
配置:
{
"routeName": "agile",
"main": "./lib/index.js",
}
会生成
const agile = React.lazy(()=>import("D:\\Desktop\\分前端\\agile-service\\react\\index.js"));
...
<Route path="/agile" component={agile}/>
环境变量方案
Choerodon猪齿鱼平台的前端环境变量方案是一种给用户自定义环境变量,并且可以在部署时进行替换的一种方案。
1. 使用
在react目录下建立.env文件,以键=值
的方式写入环境变量,最终可以使用window._env_
来访问配置的环境变量。
2. 常用环境变量
| 名称 | 类型 | 用途 | | ---------------- | ------------------------------------------------------------ | -------------------------------------- | | HTTP | 'http'|'https' | 目前没什么用(已废弃) | | API_HOST | string | 指定后端api地址前缀 | | CLIENT_ID | string | 指定登录时使用的客户端 | | LOCAL | true|false | 是否为本地开发(目前请始终设置为true) | | WEBSOCKET_SERVER | string | 指定后端websocket地址前缀 | | outward | 逗号隔开的路由地址,如/agile/preview,/agile/test,/agile/outside | 指定不需要登录即可访问的页面 |
3. 运行原理
环境变量方案分为开发时和部署时
在开发模式下使用了dotenv-runtime-plugin来实现了开发时的环境变量热更新。
在部署时,会执行env.sh实现在docker启动时读取docker配置的环境变量,并生成一个js语句,插入到html中
跨模块组件注入方案
组件转发
由于历史原因,你可以使用import ... from '@choerodon/boot'
形式的语句来引用@choerodon/master
中的内容,这是因为@choerodon/boot
配置了alias
新代码请使用
import ... from @choerodon/master
,因为alias
之后可能会去掉。