# polymerize

**Repository Path**: qiankun-demo/polymerize

## Basic Information

- **Project Name**: polymerize
- **Description**: 聚合库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-09
- **Last Updated**: 2022-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description:
 * @Author: lishifeng
 * @Date: 2022-01-25 14:10:32
 * @LastEditors: lishifeng
 * @LastEditTime: 2022-02-09 17:18:31
-->

## 操作步骤

- `npm run clone:all` 克隆所有项目
- `npm i` 安装依赖
- `npm run serve` 本地启动项目
- `npm run build` 打包项目
- `npm run bundle` 将打好的包构建到根目录

## 参考文档

- [微前端 qiankun 从搭建到部署的实践](https://www.cnblogs.com/love314159/p/13791556.html)
- [手把手实践 qiankun 微前端的开发和部署](https://www.cnblogs.com/wuzhiquan/p/14090485.html)
- [qiankun 如何在主应用的某个路由页面加载微应用](https://blog.csdn.net/sunqiang4/article/details/122014739)
- [子项目之间的公共插件如何共享](https://juejin.cn/post/6844904185910018062#heading-18)

## 目录结构

```text
|-- root
    |-- .gitignore
    |-- package-lock.json
    |-- package.json
    |-- README.md
    |-- app1                子应用(history 路由)
    |-- app2                子应用(hash 路由)
    |-- common              公共模块
    |-- dist                构建后的目录(可直接放到服务器进行发布)
    |   |-- main            主应用的包
    |   |-- subapp          子应用的包
    |       |-- app1        子应用1
    |       |-- app2        子应用2
    |-- main                主应用(history 路由)
    |-- scripts             脚本目录
        |-- bundle.sh       构建的脚本
        |-- clone-all.sh    克隆项目的脚本
```

## NOTE

- **全局状态管理** qiankun 通过 initGlobalState, onGlobalStateChange, setGlobalState 实现主应用的全局状态管理，然后默认会通过 props 将通信方法传递给子应用
- **getGlobalState** 主应用自定义的一个方法，下发给子应用，子应用就不需要一直监听 stateChange 事件，子应用只需要在首次 mount 时通过 getGlobalState 初始化一次即可
- **getGlobalState 缺点** 只适合每次只 mount 一个子应用的架构，若父应用一次 mount 多个子应用，当数据改变时，不会触发子应用的 mount，数据无法同步，此时就需要子应用监听 stateChange 进行处理
- **npm-run-all** --serial 表示有顺序地一个个执行，--parallel 表示同时并行地运行
- **.sh** 执行 .sh 要用 Git Bash Here 命令行工具

## NGINX

#### 常用命令

- `start nginx` 启动 nginx
- `nginx -s reload` 重新读取文件
- `nginx -s reopen` 重启服务
- `nginx -s quit` 退出
- `nginx -s stop` 强制关闭

#### 常用配置

```
http {
    server {
        listen 10001;
        server_name localhost;

        # 跨域配置
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        location / {
            root D:/nginxWebsite/qiankun/main;
            index index.html;
            # 允许列出整个目录
            autoindex on;
            # 处理刷新出现 404 问题
            try_files $uri $uri/ /index.html;
        }

        # 单独访问子应用
        location /subapp {
            alias D:/nginxWebsite/qiankun/subapp;
            index index.html;
            autoindex on;
        }

        location /subapp/app1 {
            alias D:/nginxWebsite/qiankun/subapp/app1;
            index index.html;
            autoindex on;
            try_files $uri $uri/ /index.html;
        }

        location /subapp/app2 {
            alias D:/nginxWebsite/qiankun/subapp/app2;
            index index.html;
            autoindex on;
        }
    }
}
```

#### root & alias

- 只有 / 才可以在 location 下设置 root, 其余子路径，应设置 alias
- root 与 alias 主要区别在于 nginx 如何解释 location 后面的 uri
- root: root 路径 ＋ location 路径
- alias: 使用 alias 路径替换 location 路径

## TODO

- 提取端口号统一配置文件
- 性能优化