前端工程化(一)：Git与工作流 webpack基础 lerna包管理

Git fetch

git fetch 命令用于从远程获取代码库，该命令执行完后需要执行 git merge 远程分支到你所在的分支。
git pull = git fitch + git merge
git pull --rebase = git fetch + git rebase

git merge 与 get rebase

• 公共分支不能 rebase
• 个人feature开发分支必须rebase

工作流 Git flow

Git flow 使用扩展命令在预定义的顺序下执行多个操作

安装 brew install git-flow-avh
初始化 在项目下 git flow init

• master(生产分支): 仓库的主分支，这个分支包含最近发布到生产环境的代码，最近发布的Release， 这个分支只能从其他分支合并，不能在这个分支直接修改‌
• hotfix(补丁分支)：

优点：1.分支各司其职，覆盖大部分开发场景 2.预期master分支中任何commit都是可部署的 3.严格按照流程执行，出现重大事故的情形会大大降低
缺点：1.过于繁琐 2.master分支历史记录并不干净 3.对持续部署和monorepo仓库不友好

工作流 GitHub flow

GitHub推崇的工作流：部署（Deploy）发生在 合并（Merge）之前
非阻塞式集成 —— 在产生任何副作用之前得知当前修改的所有集成效果，达到真正的持续集成。

工作流 Gitlab flow

上游优先：只存在一个主分支master，它是所有其他分支的”上游”。只有上游分支采纳的代码变化，才能应用到其他分支。

开发分支是预发分支的”上游”，预发分支又是生产分支的”上游”。代码的变化，必须由”上游”向”下游”发展。比如，生产环境出现了bug，这时就要新建一个功能分支，先把它合并到master，确认没有问题，再cherry-pick到pre-production，这一步也没有问题，才进入production。

Eslint Prettier

Eslint校验代码语法，prettier统一格式化代码

CI/CD持续集成/部署

根目录中的.gitlab-ci.yml 指定构建、测试和部署的脚本

模块管理

“core-js” : “3.6.5” 版本3.6.5
“core-js” : “～3.6.5” 版本3.6.x中最新的版本
“core-js” : “^3.6.5” 版本3.x.x中最新的版本

	npm老版本	yarn	npm5+
安装速度	串行	并行 缓存	并行 symlinks
版本统一性	不统一	统一	统一

pnpm 使用符号链接和硬链接的做法，从而规避了从缓存中拷贝文件的时间，使得文件的安装和卸载的速度更快

Lerna

多包管理工具， 可以让你在主项目下管理多个子项目，从而解决了多个包互相依赖，且发布时需要手动维护多个包的问题

• 固定模式 --exact
• 独立模式 --independent 允许对每个库单独改变版本号

lerna bootstrap 安装依赖
lerna clean 删除各个包下的node_modules
lerna init 创建新的lerna库
lerna list 显示package列表
lerna changed 显示自上次release tag以来有修改的包
lerna diff 显示自上次release tag 以来有修改的包的差异
lerna exec 在每个包目录下执行任意命令
lerna run 执行每个包package.json中的脚本命令
lerna add 添加一个包的版本为各个包的依赖
lerna import 引入package
lerna link 链接互相引用的库
lerna create 新建package
lerna publish 发布

微前端 single-spa

超大型系统开发痛点：模块之间耦合 模块上线影响范围大 代码合并难 不能并行迭代 沟通成本高
解决方案：主模块与子模块分离 独立开发 独立部署 独立运行

主框架与子应用集成的方式

	优点	缺点
构建时组合	可合并公共模块，进行优化	模块间有耦合，对子模块有侵入
运行时组合	单独构建打包，完全解耦，对子模块无侵入	子模块之间不能合并优化

子应用入口

	优点	缺点
HTML Entry	子应用是完整方案，样式隔离	子应用独立，无法构建时优化
JS Entry	构建时可优化	子应用不完整，依赖容器节点，所有资源打包成JS，无法并行下载，样式不隔离，需要处理

挂载子应用

	优点	缺点
iframe	样式隔离 js隔离	URL不同步，刷新状态丢失 Dom不共享，剧中弹窗 变量隔离，登陆状态传递