走进前端工程化

什么是前端工程化?

可复用

自动化

自动化

  • 页面发布
  • 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

engine

By Randy Lu