走进前端工程化
什么是前端工程化?
可复用
自动化
自动化
页面发布
RPC 接口转换
...
可复用
技术栈
构建配置
插件
...
统一技术栈
(从构建的角度)
JavaScript 解析:Babel, TypeScript
样式处理:LESS / SASS / PostCSS
媒体资源: 图片
code splitting
构建优化
脚手架?
脚手架 !== 工程化
封装
生成
Umi
https://umijs.org
发布流程统一
CI?
小团队
Branch: test | pre | master
测试环境
预发环境
线上环境
push 到对应的分支后会立即触发 CI, 发布线上环境没有灰度的过程,也没有回滚的功能
多人开发同一个项目时,会出现环境占用的问题。
应用 app1
feature_a
feature_b
feature_c
feature_b
测试
预发
测试
预发
测试
预发
测试
预发
线上发布
非线上环境:http://${
cdn_host
}/${
app_name
}/${
env
}/${
feature_id
}
线上环境:https://${
cdn_host
}/${
app_name
}
测试环境:http://test.cdn.com/
app1
/
test
/
feature_a
/index.html
线上环境:https://cdn.com/
app1
/index.html
think more
think wide
use npm
观念
One more thing...
@huyafed/jce-parser
Made with Slides.com