Angular

如何透過 Angular CLI 製作自己的 Library

Posted by Ryan Tseng on 2018-12-30

前言

很多公司在開發產品時，都會習慣建立一套自己的 Library，而現在製作 Library 這件事情在 Angular 當中變得非常容易做到，以下將會介紹怎樣透過內建的 CLI 工具製作自己的 Library

環境

本文章此次所使用的 CLI 環境如下

  • Angular CLI 7.1.2
  • Node 10.14.1
  • Yarn 1.12.3 / NPM 6.4.1

建立一個新的專案

我們透過 CLI 工具產生新的專案 ng new lib-lab

加入 Library 到現有專案

ng [generate|g] library tm-lib --prefix=tm

這邊可以透過 prefix 參數來指定整個 Library 中元件的前綴，其他可設定的參數就引用一下官方文件給各位讀者參考

如文件所描述，如果沒有指定 prefix 的話，預設會是 lib 開頭

加入 FooComponent

因為我們要製作的是 Library 中的元件，所以將會加入額外的參數來產生元件到指定的 project

1
ng g c foo --project=tm-lib

component 的內容我們就維持原本的樣子，並把 component 加入到 TmLibModule 中的 declaration 和 export 區塊，才可以被其他 Module 存取到

1
2
3
4
5
@NgModule({
  declarations: [FooComponent],
  imports: [],
  exports: [FooComponent]
})

如果要讓外部可以存取到 Library 的介面， public_api.ts 這邊要記得 export 出來。

1
2
export * from './lib/foo/foo.component';
export * from './lib/tm-lib.module';

建置 Library

請在 CLI 中輸入以下指令建置 Library

1
ng build tm-lib

建置完之後會看到以下的訊息，他會被放到 /lib-lab/dist/tm-lib 底下

1
2
3
4
Built tm-lib
Built Angular Package!
 - from: /Users/ryan/Documents/Temp/lib-lab/projects/tm-lib
 - to:   /Users/ryan/Documents/Temp/lib-lab/dist/tm-lib

由於在建立 Library 的時候，CLI 工具會幫我們把 paths 加入到 tsconfig.json 中，所以等等下一個步驟我們可以直接 import 自製的 Library

1
2
3
4
5
6
7
8
9
10
11
/* tsconfig.json */
{
    "paths": {
          "tm-lib": [
            "dist/tm-lib"
          ],
          "tm-lib/*": [
            "dist/tm-lib/*"
          ]
        }
}

測試自訂的 Library

回到外面那一個專案，我們在 AppModule 中 import 我們剛剛建置完的 Library，再回到 app.component.ts 把 <tm-foo></tm-foo> 給加進去，這時候回到瀏覽器，如果出現 foo works! 表示剛剛步驟沒有錯誤。

發布 Library

你也可以直接在輸出 Library 的資料夾底下直接發布到公開的 NPM Registry 或是私有的 NPM Registry

1
2
3
4
cd dist/tm-lib
yarn publish tm-lib 
// or
npm publish tm-lib

參考資料

FEATURED TAGS
Angular
FRIENDS