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