coodex2016 / s2

sill 2，基于ng-alian的前端开发模块及工具，提供多应用构建能力，可使用同一套代码构建多个应用，比如：体验版、标准版、高级版、某客户定制版等

S2(sill 2)

一个基于ng-alain（8.0.0-rc.0），具有多应用构建能力的脚手架模板。

说明

目前绝大多数基于Angular的模板或者脚手架都是单应用构建的，也就是说，一套代码仅能构建一份app，对于一个产品来说，可能根据功能组合不同形成不同版本，例如，完整版包含10个功能，标准版包含5个功能，简化版包含3个功能， 解决方案也有，比如说，将各个功能模块发布成node package，然后构建各版本的应用，或者通过大量的配置参数，从外部传入构建参数，从而达到构建指定版本，这两者各有各的好处，也各有各的坏处：方式一，模块依赖、设计、发布对团队要求较高， 模块更新需要所有产品同步更新，而且，需要逐一维护模块项目；方式二，大量的版本配置信息使得项目结构整体复杂度较高，同样的，对团队整体能力要求较高。

为了在复杂度和功能性之间找到一个平衡，S2借鉴java技术栈中maven/gradle的一些理念，将所有代码都放在一个工程中维护，适应绝大多数团队的开发模式（手动滑稽），业务功能模块可最高限度的复用，每个产品都是具体的独立的， 不需要维护复杂的配置信息，每个产品做好自己的配置版本开发就行。

ng-alain是一个优秀的基于Angular ng-zorro-antd @delon的脚手架，文档也比较丰富比较全面， 因此，S2选择基于它做了一些重构来达到多应用构建的能力，并且，以此为基础，提供一些我们团队研发过程中碰到的需求能力，力争提供一套扩展性、通用性、灵活性上找到最优方案。

殷切期盼各位开发者为本项目提出宝贵的意见与建议，共同发展S2。

目录结构

目录	说明
build	多应用构建脚本，由 @wioo 贡献
src	源码目录
-- @concrete	后台接口服务模块，由concrete生成，非必须。TODO 使用npm package管理
-- commons	通用组件、服务、指令等，与业务功能无关
-- globals	跨模块（参见modules）复用服务、组件、指令、模块依赖等，例如跨模块复用的数据类型、功能等
-- modules	业务模块，每个业务模块对应一个导航菜单项和一系列功能界面
-- products	各个产品的根目录
-- styles	皮肤的样式（less）目录。TODO 补充theme
proxy.config.template.json	不要修改，复制为proxy.config.json(不会被纳入git管理)，需要调试时，修改新文件即可

扩展的功能

• ThemeService: 该服务为应用提供多主题皮肤的换肤功能，默认提供了四种主题：蓝色（默认）、红色、青色、黑色
• i18n: 该服务为应用提供多语言切换功能

基于ng-alain的改造

• step 1 基于ng-alain结构改造
  • mv src/app/[core, layout, shared]/i18n to src/commons/
  • mv src/commons/core/startup to src/app/core
  • modify src/commons/core/index.ts

  // 将startup.service移除通用部分
  // export * from './startup/startup.service';

  • package.json增加代理配置 --proxy-config proxy.config.json
  • mv src/app src/products/ngAlainApp // 调整成目标架构
  • modify angular.json的入口点
• step 2 多应用构建
  • ng add ngx-build-plus@^8.0.0 添加 ngx-build-plus^8.0.0 插件，用于。。。。
  • scripts目录中相关脚本，TODO: 注释
• step 3 最小化应用 TODO: 脚本化
  • products/demoApp，参见表一
  • modules/demo-module
  • cp src/commons/layout src/commons/s2/layout
  • new src/globals/global_data.ts // 用来定义全局常量，各产品可选择性覆盖，参考local-data.ts
  • TODO 完善
  • 实践建议：
    • git clone depth=1
    • remove src/products/ngAlainApp
    • remove src/commons/layout

表一

文件	作用
main.ts	app 入口文件
app.module.ts	app 应用的根模块，负责引入所需的Module
app.component.ts	app 应用的根组件
routes.module.ts	app 根路由
delon.modules.ts	delon 相关设置，用于@delon模块组件及服务的设置
local-data.ts	本产品的常量设置，可对global-data.ts的部分内容产品化覆盖

change logs

• 增加 npm i --save @types/lodash 支持object merge，用来进行globalData和localData的合并