Skip to content

Choerodon front boot is a toolkit about front end package management, startup, compilation. It is mainly used to provide custom some configurations file to create a project of React that can be modified to some extent.

License

Notifications You must be signed in to change notification settings

open-hand/choerodon-front-boot

Repository files navigation

主要功能

@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. 约定

猪齿鱼前端子模块应遵守以下约定

  1. 在package.json中配置唯一的routeNamemaininstall(可选)字段
  2. 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之后可能会去掉。

About

Choerodon front boot is a toolkit about front end package management, startup, compilation. It is mainly used to provide custom some configurations file to create a project of React that can be modified to some extent.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published