|
1 | | -# Github Actions |
| 1 | +# Micro Framework |
2 | 2 |
|
3 | | -ci 的流程和解释如下所示： |
| 3 | +<p align="left"> |
| 4 | + <!-- https://github.com/OWNER/REPOSITORY/actions/workflows/WORKFLOW-FILE/badge.svg --> |
| 5 | + <a href="https://github.com/ziyi2/micro-framework/actions/workflows/ci.yml"><img src="https://github.com/ziyi2/micro-framework/actions/workflows/ci.yml/badge.svg" alt="CI Status"></a> |
| 6 | + <a href="https://github.com/ziyi2/micro-framework/actions/workflows/cd.yml"><img src="https://github.com/ziyi2/micro-framework/actions/workflows/cd.yml/badge.svg" alt="CD Status"></a> |
| 7 | + <a href='https://coveralls.io/github/ziyi2/micro-framework?branch=master'><img src='https://coveralls.io/repos/github/ziyi2/micro-framework/badge.svg?branch=master' alt='Coverage Status' /></a> |
| 8 | + <a href="https://www.npmjs.com/package/ziyi-micro-framework"><img alt="npm" src="https://img.shields.io/npm/v/ziyi-micro-framework"></a> |
| 9 | +</p> |
4 | 10 |
|
5 | | -``` yml |
6 | | -# 当前的 yml（.yaml） 文件是一个 workflow，必须放置在项目的 .github/workflow 目录下 |
| 11 | +Micro Framework 是[《深入浅出微前端》](https://juejin.cn/book/7258893482318626868)小册衍生出来的一个微前端示例框架。 |
7 | 12 |
|
8 | | -# name: 当前 workflow 的名称 |
9 | | -name: ci |
| 13 | +## 特性 |
10 | 14 |
|
11 | | -# on: 指定 workflow 触发的 event |
12 | | -# |
13 | | -# event 有以下几种类型 |
14 | | -# - webhook |
15 | | -# - scheduled |
16 | | -# - manual |
17 | | -on: |
18 | | - # push: 一个 webhook event，用于提交代码时触发 workflow，也可以是触发列表，例如 [push, pull_request] |
| 15 | +- 基于 single-spa 进行封装 |
| 16 | +- 基于 iframe 进行隔离设计 |
| 17 | +- 提供 Loader 的扩展机制 |
| 18 | +- ... |
19 | 19 |
|
20 | | - # workflows 触发的 event 大部分是基于 webhook 配置，以下列举几个常见的 webhook: |
21 | | - # - delete: 删除一个 branch 或 tag 时触发 |
22 | | - # - fork / watch: 某人 fork / watch 项目时触发（你问有什么用，发送邮件通知不香吗？） |
23 | | - # - pull_request: 提交 PR 时触发 |
24 | | - # - page_build: 提交 Github Pages-enabled 分支代码时触发 |
25 | | - # - push: 提交代码到特定分支时触发 |
26 | | - # - registry_package: 发布或跟新 package 时触发 |
| 20 | +## 安装 |
27 | 21 |
|
28 | | - # 更多 webhook 可查看 https://docs.github.com/zh/actions/using-workflows/events-that-trigger-workflows |
| 22 | +``` bash |
| 23 | +# CommonJS 库包安装 |
| 24 | +npm i ziyi-micro-framework --save |
29 | 25 |
|
30 | | - # 从这里可以看出 Git Actions 的一大特点就是 Gihub 官方提供的一系列 webhook |
31 | | - push: |
32 | | - # branches: 指定 push 触发的特定分支，这里你可以通过列表的形式指定多个分支 |
33 | | - branches: |
34 | | - - demo/** |
35 | | - - feat/** |
36 | | - - fix/** |
37 | | - # |
38 | | - # branches 的指定可以是通配符类型，例如以下配置可以匹配 refs/heads/releases/10 |
39 | | - # - 'releases/**' |
40 | | - # |
41 | | - # branches 也可以使用反向匹配，例如以下不会匹配 refs/heads/releases/10 |
42 | | - # - '!releases/**' |
43 | | - # |
44 | | - # branches-ignore: 用于指定当前 webhook 不触发的分支 |
45 | | - # |
46 | | - # tags: 用于指定当前 webhook 触发的 tag |
47 | | - # |
48 | | - # tags: |
49 | | - # - v1 # Push events to v1 tag |
50 | | - # - v1.* # Push events to v1.0, v1.1, and v1.9 tags |
51 | | - # |
52 | | - # tags-ignore: 类似于 branches-ignore |
53 | | - # |
54 | | - # paths、paths-ignore... |
55 | | - # |
56 | | - # 更多关于特定过滤模式可查看 https://docs.github.com/zh/actions/using-workflows/workflow-syntax-for-github-actions#filter-pattern-cheat-sheet |
57 | | - # |
58 | | - # 其他的 webhook 控制项还包括 types（不是所有的 webhook 都有 types），例如已 issues 为例，可以在 issues 被 open、reopened、closed 等情况下触发 workflow |
59 | | - # 更多 webhook 的 types 可查看 https: //docs.github.com/en/actions/reference/events-that-trigger-workflows#webhook-events |
60 | | - # |
61 | | - # on: |
62 | | - # issues: |
63 | | - # types: [opened, edited, closed] |
64 | | - |
65 | | - # 除此之外如果对于每个分支有不同的 webhook 触发，则可以通过以下形式进行多个 webhook 配置 |
66 | | - # |
67 | | - # push: |
68 | | - # branches: |
69 | | - # - master |
70 | | - # pull_request: |
71 | | - # branches: |
72 | | - # - dev |
73 | | - # |
74 | | - # 除了以上所说的 webhook event，还有 scheduled event 和 manual event |
75 | | - # scheduled event: 用于定时构建，例如最小的时间间隔是 5 min 构建一次 |
76 | | - # 具体可查看 https: //docs.github.com/en/actions/reference/events-that-trigger-workflows#scheduled-events |
77 | | - |
78 | | -# env: 指定所有 job 和 step 通用的环境变量（在 job 中或者 steps 中也可以通过 env 配置自己的环境变量） |
79 | | -# |
80 | | -# defaults: 当前所有 job 的默认配置 |
81 | | - |
82 | | -# jobs: 一个 workflow 由一个或多个 job 组成 |
83 | | -jobs: |
84 | | - # job id: 是 job 的唯一标识，可以通过 _ 进行连接，例如: my_first_job，例如这里的 test 就是一个 job id |
85 | | - test: |
86 | | - # name: 在 Github 中显示的 job 名称 |
87 | | - name: CI 执行流程 |
88 | | - # |
89 | | - # needs: 用于继发执行 job，例如当前 job build 必须在 job1 和 job2 都执行成功的基础上执行 |
90 | | - |
91 | | - # jobs: |
92 | | - # job1: |
93 | | - # job2: |
94 | | - # needs: job1 |
95 | | - # job3: |
96 | | - # needs: [job1, job2] |
97 | | - # |
98 | | - # runs-on: job 运行的环境配置，包括: |
99 | | - # - windows-latest |
100 | | - # - windows-2019 |
101 | | - # - ubuntu-20.04 |
102 | | - # - ubuntu-latest |
103 | | - # - ubuntu-18.04 |
104 | | - # - ubuntu-16.04 |
105 | | - # - macos-latest |
106 | | - # - macos-10.15 |
107 | | - # - self-hosted（本地机器，具体可查看 https://docs.github.com/zh/actions/hosting-your-own-runners/managing-self-hosted-runners/using-self-hosted-runners-in-a-workflow） |
108 | | - |
109 | | - runs-on: ubuntu-latest |
110 | | - |
111 | | - # |
112 | | - # outputs: 用于输出信息 |
113 | | - # |
114 | | - # env: 用于设置当前 job 的环境变量 |
115 | | - # |
116 | | - # defaults: 当前所有 step 的默认配置 |
117 | | - |
118 | | - # if: 满足条件执行当前 job |
119 | | - |
120 | | - # steps: 一个 job 由多个 step 组成，step 可以 |
121 | | - # - 执行一系列 tasks |
122 | | - # - 执行命令 |
123 | | - # - 执行 action |
124 | | - # - 执行公共的 repository |
125 | | - # - 在 Docker registry 中的 action |
126 | | - steps: |
127 | | - # |
128 | | - # id: 类似于 job id |
129 | | - # |
130 | | - # if: 类似于 job if |
131 | | - # |
132 | | - # name: 当前 step 的名字 |
133 | | - - name: 下载 Github 仓库 |
134 | | - # |
135 | | - # uses: 用于执行 action |
136 | | - # |
137 | | - # action: 可以重复使用的单元代码 |
138 | | - # - 为了 workflow 的安全和稳定建议指定 action 的发布版本或 commit SHA |
139 | | - # - 使用指定 action 的 major 版本，这样可以允许你接收 fixs 以及 安全补丁并同时保持兼容性 |
140 | | - # - 尽量不建议使用 master 版本，因为 master 很有可能会被发布新的 major 版本从而破坏了 action 的兼容性 |
141 | | - # - action 可能是 JavaScript 文件或 Docker 容器，如果是 Docker 容器，那么 runs-on 必须指定 Linux 环境 |
142 | | - # |
143 | | - # 指定固定 commit SHA |
144 | | - # uses: actions/setup-node@74bc508 |
145 | | - # 指定一个 major 发布版本 |
146 | | - # uses: actions/setup-node@v1 |
147 | | - # 指定一个 minor 发布版本 |
148 | | - # uses: actions/setup-node@v1.2 |
149 | | - # 指定一个分支 |
150 | | - # uses: actions/setup-node@master |
151 | | - # 指定一个 Github 仓库子目录的特定分支、ref 或 SHA |
152 | | - # uses: actions/aws/ec2@master |
153 | | - # 指定当前仓库所在 workflows 的目录地址 |
154 | | - # uses: ./.github/actions/my-action |
155 | | - # 指定在 Dock Hub 发布的 Docker 镜像地址 |
156 | | - # uses: docker://alpine: 3.8 |
157 | | - # A Docker image in a public registry |
158 | | - # uses: docker:/gcr.io/cloud-builders/gradle |
159 | | - |
160 | | - # checkout action 主要用于向 github 仓库拉取源代码（需要注意 workflow 是运行在服务器上，因此需要向远程的 github 拉取仓库源代码） |
161 | | - # 它的功能包括但不限于 |
162 | | - # - Fetch all history for all tags and branches |
163 | | - # - Checkout a different branch |
164 | | - # - Checkout HEAD^ |
165 | | - # - Checkout multiple repos (side by side) |
166 | | - # - Checkout multiple repos (nested) |
167 | | - # - Checkout multiple repos (private) |
168 | | - # - Checkout pull request HEAD commit instead of merge commit |
169 | | - # - Checkout pull request on closed event |
170 | | - # - Push a commit using the built-in token |
171 | | - |
172 | | - # checkout action: https: //github.com/actions/checkout |
173 | | - uses: actions/checkout@v4 |
174 | | - # with: action 提供的输入参数 |
175 | | - # with: |
176 | | - # 指定 checkout 的分支、tag 或 SHA |
177 | | - # 如果默认不指定，则指向触发工作流所在分支的 SHA |
178 | | - # When checking out the repository that triggered a workflow, this defaults to the reference or SHA for that event. |
179 | | - # 更多 checkout action 的配置可查看 https://github.com/actions/checkout#usage |
180 | | - # ref: feat/ci |
181 | | - |
182 | | - # |
183 | | - # run: 使用当前的操作系统的默认的 non-login shell 执行命令行程序 |
184 | | - # 运行单个脚本 |
185 | | - # run: npm install |
186 | | - # 运行多个脚本 |
187 | | - # run: | |
188 | | - # npm ci |
189 | | - # npm run build |
190 | | - # |
191 | | - # working-directory: 用于指定当前脚本运行的目录 |
192 | | - # working-directory: ./temp |
193 | | - # |
194 | | - # shell: 可以指定 shell 类型进行执行，例如 bash、pwsh、python、sh、cmd、powershell |
195 | | - # shell: bash |
196 | | - # |
197 | | - # env: 除了可以设置 workflow 以及 job 的 env，也可以设置 step 的 env（可以理解为作用域不同，局部作用域的优先级更高） |
198 | | - # |
199 | | - # comtinue-on-error: 默认当前 step 失败则会阻止当前 job 继续执行，设置 true 时当前 step 失败则可以跳过当前 job 的执行 |
200 | | - |
201 | | - # - name: 缓存 node_modules 依赖 |
202 | | - # # cache action: https://github.com/actions/cache |
203 | | - # # cache 在这里主要用于缓存 npm，提升构建速率 |
204 | | - # uses: actions/cache@v3 |
205 | | - # # npm 缓存的路径可查看 https://docs.npmjs.com/cli/cache#cache |
206 | | - # # 由于这里 runs-on 是 ubuntu-latest，因此配置 ~/.npm |
207 | | - # with: |
208 | | - # # 指定缓存和还原的路径 |
209 | | - # path: ~/.npm |
210 | | - # # key 中定义缓存标志，runner.os 指当前环境的系统。 |
211 | | - # # 这里使用 package-lock.json 的内容生成 Hash 值作为缓存的 key 值 |
212 | | - # # 一旦 package-lock.json 发生变化，则会导致 Hash 值变化，从而变更缓存内容 |
213 | | - # key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} |
214 | | - # # 备用 key，如果 key 没有命中缓存，则可以使用 restore-keys 进行备用缓存匹配 |
215 | | - # restore-keys: | |
216 | | - # ${{ runner.os }}-node- |
| 26 | +# ES Module 库包安装 |
| 27 | +npm i ziyi-micro-framework-es -save |
| 28 | +``` |
217 | 29 |
|
218 | | - # github-script action: https://github.com/actions/github-script |
219 | | - # 在 workflow 中使用 Script 语法调用 Github API 或引用 workflow context |
220 | | - # - uses: actions/github-script@v6 |
221 | | - # id: my-script |
222 | | - # with: |
223 | | - # result-encoding: string |
224 | | - # retries: 3 |
225 | | - # script: | |
226 | | - # github.rest.issues.get({ |
227 | | - # issue_number: context.issue.number, |
228 | | - # owner: context.repo.owner, |
229 | | - # repo: context.repo.repo, |
230 | | - # }) |
| 30 | +## 使用 |
231 | 31 |
|
232 | | - # setup-node action: https://github.com/actions/setup-node |
233 | | - # 配置 Node 执行环境（当前构建的服务器默认没有 Node 环境，可以通过 Action 安装 Node） |
234 | | - # 需要注意安装 Node 的同时会捆绑安装 npm，如果想了解为什么会捆绑，可以 Google 一下有趣的故事哦 |
235 | | - # 因此使用了该 action 后就可以使用 npm 的脚本在服务器进行执行啦 |
236 | | - - name: 下载和安装 Node 环境 |
237 | | - uses: actions/setup-node@v3 |
238 | | - with: |
239 | | - # 在 package.json 的 engines 中我们配置了 "node": ">=16.18.1" |
240 | | - # 因此这里对安装的 Node 进行版本限定 |
241 | | - node-version: "16.x" |
| 32 | +暂无使用方法，正在设计中... |
242 | 33 |
|
243 | | - - name: 安装依赖 |
244 | | - # 需要注意 npm ci 和 npm i 的区别 |
245 | | - run: npm ci |
| 34 | +## 贡献指南 |
246 | 35 |
|
247 | | - - name: 代码校验 |
248 | | - run: npm run lint |
| 36 | +如果该微前端框架代码存在优化空间，希望大家可以指正。可以通过提 [Issues](https://github.com/ziyi2/micro-framework/issues) 的形式告知，也可以通过 Pull Request 的形式提交指正代码，作者会对代码进行 Review，如果通过会合并大家的代码，也可能告诉大家为什么不能接受这样的修改，并最终关闭它。 |
249 | 37 |
|
250 | | - - name: 单元测试 |
251 | | - run: npm test |
| 38 | +在提交一个 Pull Request 之前，请确保你按照以下的步骤来做： |
252 | 39 |
|
253 | | - - name: 文档构建 |
254 | | - run: npm run docs:build |
| 40 | +- Fork 仓库 |
| 41 | +- 创建分支进行修改 |
| 42 | +- 使用 Angular 规范的提交说明 |
| 43 | +- 更新源码的同时更新相应的 VuePress 说明文档 |
| 44 | +- 确保代码通过 CI 流程 |
255 | 45 |
|
256 | | - - name: 代码构建 |
257 | | - run: npm run build |
| 46 | +## 许可协议 |
258 | 47 |
|
259 | | - # |
260 | | - # timeout-minutes: 一个 job 执行的最大时间，默认是 6h，如果超过时间则取消执行 |
261 | | - # |
262 | | - # strategy.matrix: 例如指定当前 job 的 node 版本列表、操作系统类型列表等 |
263 | | - # strategy.fail-fast |
264 | | - # strategy.max-parallel |
265 | | - # continue-on-error: 一旦当前 job 执行失败，那么 workflow 停止执行。设置为 true 可以跳过当前 job 执行 |
266 | | - # container: Docker 容器配置，包括 image、env、ports、volumes、options 等配置 |
267 | | - # |
268 | | - # services: 使用 Docker 容器 Action 或者 服务 Action 必须使用 Linux 环境运行 |
| 48 | +[MIT](https://opensource.org/license/mit/) |
269 | 49 |
|
270 | | -``` |
| 50 | +Copyright (c) 2023-present ziyi |
0 commit comments