Angualr 开源组件Demo框架设计

序

公司的技术展选择的是 Angular ，设计风格也是Google的 Mateiral Design。Goolge官方团队有提供一套Material Angular版本的组件库 material.angular.io。可是国人的操做习惯与国外仍是有一些区别，针对这部分业务，公司打算基于官方组件，封装一些自定义的组件，而且开源出来。这一过程中，主要对如下几个方面作了一些考虑。但愿能对你们的开源项目有所帮助。不足之处还望多多包含( ´ ▽ ` )。

Github 欢迎你们Star

• Debug
• Demo 及 Demo源代码
• Build
• Github开源
• npm发布

目录结构

Debug

Debug阶段主要考虑到的是路径引入问题，为了让 Demo源代码 可以和生产环境下的使用保持一致，在 PROJECT_ROOT/tsconfig.json (PROJECT_ROOT指项目根目录)中作了一些配置

{
  ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@petkit/*": [
        "./src/lib/*"
      ],
      "demo/*": [
        "./src/demo/*"
      ],
      "util/*": [
        "./src/util/*"
      ]
    }
  }
  ...
}
复制代码

将全部 @petkit/ 开头的路径引入转换至 src/lib/ 下

schema

import { NgxHighlightModule } from '@petkit/ngx-highlight';
复制代码

将被转换为

import { NgxHighlightModule } from 'PROJECT_ROOT/src/lib/ngx-highlight';
复制代码

Demo 及 Demo源代码

这里参考了Angualar Material官方团队的设计（此处Demo和Example概念与官方有出入，官方的示例代码是放在example目录下的，我的以为均可以，只是项目已经配好了，就不想再去调整得与官方保持一致了）。

material 2

将全部demo目录下的文件做为静态资源，经过http请求源代码，使用 ngx-highlight 高亮语法。 angular.json 配置以下

{
  "projects": {
    "example": {
      "root": ".",
      "sourceRoot": "src/example",
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/demo",
                "output": "assets/demo"
              },
              "src/example/assets"
            ]
          }
        }
      }
    }
  }
}
复制代码

注：sourceRoot 是 ng g * 的相对路径

demo 与 example 同级，直接引入会报错

{
  ...
  "assets": [
    // Error: The src/demo asset path must start with the project source root.
    "src/demo",
    "src/example/assets"
  ]
  ...
}
复制代码

demo会被看成静态资源输出至 dist/example/assets/demo，此时使用http请求对应路径文件便可。

Build

这部分已经有现成的库 ng packagr 能够帮助咱们直接打包了

ng-packagr

ng-packagr -p ./src/**/package.json
复制代码

Github 开源

针对 lib 下的源代码，采用 git submodule 的方式能够帮助咱们更好地维护开源组件。

关于 git submodule segmentfault 上有篇文章写得蛮不错的 git submodule

git submodule add git@github.com:petkit-io/ngx-highlight.git src/lib/ngx-highlight
复制代码

npm发布

ng-packagr 打包出来的代码即可以直接发布。

npm publish path --access public;
复制代码

npm 上的 organization 须要加上 --access public 才能发布。每次发布完成后自动生成 CHANGELOG，打上新的版本号。

conventional-changelog 能够帮助咱们自动生成Change Log commitlint能够帮助咱们规范commit message

自动化

build github npm 三个阶段能够经过脚本自动执行。PROJECT_ROOT/bin/pub.sh：

#!/usr/bin/env bash
libRoot=src/lib;
distRoot=dist;

buildLib() {
  packagePath=$1;

  npx ng-packagr -p $packagePath;
}

publishLib() {
  libName=$1;
  libPath=$libRoot/$libName;

  buildLib $libPath/package.json;
  npm publish $distRoot/$libName --access public;

  cd $libPath;
  git add .;
  git commit -m "chore(version): publish npmjs" 1>/dev/null 2>&1;
  npm version patch;
  git push;
  git push --tags;
}

publishLib $1
复制代码

maidfile.md：

## pub

发布类库
命令格式 `npx maid pub [lib-name]`

e.g.
- `npx maid pub ts-lib`
- `npx maid pub ngx-material`

```bash libName=$1 command="./bin/pub.sh $libName" echo $command $command 复制代码

使用：

npx maid pub ngx-highlight
复制代码

End

总体结构还有一些不完善的地方，但愿你们多多提些建议，咱们也会逐步改善。

Github Star Star Star 重要的事情说三遍o(≧v≦)o