如何前端脚手架 “泼出去的水” 的问题

#前端工程化

目录

总结

  • 原因
    • ==同步==问题
    • 生成项目后，与模板完全脱离，无法获得模板更新
  • 解决方案
    • Git Submodule
    • 配置中心化方案
    • 插件化架构
    • 脚手架与模板解耦
    • 远端加载
    • 前端资产运营

1. 痛点

传统脚手架存在的问题

  1. 项目创建后与模板完全解耦
  2. 模板升级无法同步到已创建项目
  3. 项目配置难以统一管理
  4. 最佳实践无法及时==同步==
# 传统方式
vue create my-project
# 或
create-react-app my-project

# 生成项目后，与模板完全脱离，无法获得模板更新

2. 解决方案

  • 基于 Git Submodule 的方案
    • 写一个脚本 npm run sync-template 来用于更新模板
  • 基于 npm 包的方案
    • 更新包版本
  • 基于 Monorepo 多包管理的方案
  • 配置中心化方案，注册配置更新，推送更新，订阅通知等
    • 技术难度稍高
  • 插件化架构
    • 动态加载组件
    • 更新插件等
  • 脚手架与模板解耦
    • 模板注册中心
    • 远端动态加载模板
    • 增量更新策略？
      • 差异化更新
  • 作为前端资产运营？
    • 统计脚手架使用情况
    • 模板使用情况
    • 使用情况跟踪
    • 更新日志等

3. 其他

  • 模板分层
template/
├── core/          # 核心配置（强制更新）
├── recommended/   # 推荐配置（可选更新）
└── custom/        # 自定义配置（本地维护）
  • 更新机制
  • 配置合并