ikice-stark

导读

基于飞冰的微前端架构，架构内支持子应用类型为 工程化框架react, 工程化框架vue,模板引擎vue

接入消息总线模块、沙箱隔离、公共组件、应用代理、一键打包等模块

让开发专心于业务，开箱即用。

了解飞冰

创建项目和接入项目之前，请先

• 了解飞冰
• 飞冰物料
• @ice/stark

以保证顺利开发。

架构导图

如何使用项目？

• 安装依赖: npm run i-all / npm run i-all:cnpm
• 全局启动: npm run start
• 打包: npm run build
• 独立启动应用模板: npm run start-react

如何接入应用

1. apps目录已置放两个vue (vue-apps) / react (react-apps) 应用模板，根据业务需求，复制一份新应用出来进行接入。

2. src/app.tsx中 getApps方法中注册新应用入口。

3. package.json添加start-xxx命令，并添加到scripts -> start命令中。

"start": "concurrently \"npm run start-react\" \"npm run start-vue\" \"npm run start-tark\" ",

4. src/layouts/BaseicLayout/menuConfig.ts 配置一级菜单入口。

业务模块如何接入

如需要迁移老的业务模块进入，可将原业务文件夹复制至应用pages目录下, 按照以下步骤修改。

1. ./build.json 配置代理
2. 配至应用内部路由,
   • react./apps/react-apps/src/router.jsx
   • vue./apps/vue-apps/src/router/routes/index.js
3. 配置状态管理
   • react ./apps/react-apps/src/store/reducer.js
   • vue./apps/vue-apps/src/store/index.js

如何传递状态

stark为微前端架构中的状态管理，采用redux与@ice/stark-data相护同步方案，不推荐直接使用@ice/stark-data接口

如果react子应用想订阅微前端stark状态，与订阅自身stores方法一致，因为已经合并到了自身状态管理中。调用方法如下：

import { connect } from 'react-redux';

class ReactAppsComponents extends React.Component {
  render{ ... }
}

export default connect(stores => ({
  stark: stores.stark,
}))(ReactAppsComponents)

保留了与以前redux架构相同的开发者习惯。一样通过connect注入的方式。

如果是react子应用想改变微前端状态stark状态，可通过调用action-stark中的syncStarkUp方法。

import { syncStarkUp } from '@/store/action-stark';

dispatch(syncStarkUp('acitonForStark', payload));

acitonForStark是你需要触发的stark中的aciton操作，payload为对应的值。

打包部署

npm run build

包在根目录build文件夹下。

如果接入新应用后需手动增加script-build命令，并且修改根目录build.sh脚本。

目录结构

apps 📁                       // 应用文件
  |-- 📁 react-apps            // react16应用接入模版
  |-- 📁 vue-apps              // vue应用接入模版
build                       // 包文件
public                      // 公共文件
scripts                     // 脚本文件夹
src
  |-- commonPage            // 公共页面
  |-- components            // stark公共组件
  |-- config                // stark配置目录
  |-- entry                 // stark配置目录
    |-- apis                // 用户登陆和获取权限相关接口
    |-- index               // 入口初始化
    |-- service-auth        // 权限接口拦截器
    |-- service-intercept   // 业务拦截器
  |-- layouts               // stark配置目录
    |-- BasicLayout         // 原始布局
    |-- FrameworkLayout     // 嵌入布局
  |-- pages                 // 业务
  |-- stark                 // stark数据上行管理
  |-- store                 // stark状态管理
  |-- utils                 // stark工具
  |-- app.tsx               // stark入口文件
  |-- global.scss           // 全局初始化样式
  |-- routes.ts             // stark路由
  |-- typings.d.ts
.editorconfig               // IDE配置文件
.eslintignore               // js规则配置屏蔽文件
.eslintrc                   // js规则配置
.gitignore                  // git提交屏蔽文件
.prettierignore             // 代码格式化配置屏蔽文件
.prettierrc.js              // 代码格式化配置文件
.stylelintignore            // 样式规则配置屏蔽文件
.stylelintrc.js             // 样式规则配置
build.json                  // ice-stark 配置文件 / api代理
package-lock.json           
package.json              
README.md                   // 项目说明书
screenshot.png              // 项目快捷截图
tsconfig.json               // typescript 根目录/编译选项

注意事项

• 架构如有修改，请维护README.md 让架构更加优秀。
• 接入过程中如有问题，请邮件联系 cuishijie@inke.cn

效果图

常见问题

1. 为什么启动项目显示很多sockjs-node/info status 500 报错？

答： 项目热更新跨域问题，正在想办法解决，不会影响开发。

2. 我业务拷贝进来之后，为什么请求失效了？

答： 请检查一下有没有在stark根目录build.json中配置全局代理。

2. 业务接口代理名称重复了怎么办？

答： 匹配规则请延长一些，尽量区分不一样的业务，以后会上动态代理模块。