為什么要發布npm包

根本原因時為了能夠在更廣泛的區域復用代碼，比如公司不支持一般的外部網絡，但是支持npm包的下載，那么就可以發布npm包，然后在公司內使用。

angular的npm不同嗎

angular library
angular 目前已經到angular20 版本了，使用typescript，而typescript的代碼無法直接執行。雖然可以把代碼直接發布，然后npm install之后，拷貝代碼到目錄，直接利用。但是有更標準的angular的模塊可以使用的辦法。

首先編寫代碼

以我的項目為例
用于發布的原始ts代碼位于項目的src/app/nexthub下，有faker和ui兩個文件夾，最后他們被認為兩個“模塊”。

其中index.ts 和public-api.ts 是用作導出類。正常的只需要一個index.ts即可，但發布的時候的文件和這個一樣，所以就和發布的源代碼的格式保持一致。

使用angular生成工具

在終端中輸入

ng generate library your-library-name

例如

ng-cli 工具就會在 projects路徑下創建你給定名字的包，默認包含一些配置文件和一個組件以及一個服務。

packageName/ng-package.json
根 ng-package.json文件

{"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../dist/nexthub.asia-faker-ui2","lib": {"entryFile": "src/public-api.ts"}
}

其中dest 指定該包構建之后生成的發布包的位置。（相對于本文件的位置）
lib.entryFile 指定的是 public-api.ts 文件的位置，該文件用于導出一些類。

修改自己的package

可以直接修改為下面的形式
其中

"lib": {"entryFile": "public-api.ts"}

變更了文件路徑，接下來會將該文件移到包nexthub.asia-faker-ui2下面

{"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../publish","deleteDestPath": true,"lib": {"entryFile": "public-api.ts"}
}

然后進行如下操作

• 將代碼文件拷貝到nexthub.asia-faker-ui2下
• 將默認生成的組件和服務也移到nexthub.asia-faker-ui2下
• 將生成的src/public-api.ts 移到nexthub.asia-faker-ui2下
• 將多余的空文件夾刪除
• 創建兩個ng-package.json分別放到nexthub.asia-faker-ui2/faker下和nexthub.asia-faker-ui2/faker/ui下，內容均為

{"lib": {"entryFile": "public-api.ts"}
}

經過上面幾步后，包的路徑就構建完成

接下來以 ui包舉例
index.ts

export * from "./public-api"

ng-package.json

{"lib": {"entryFile": "public-api.ts"}
}

public-api.ts

export * from "./scroll-viewer/scroll-viewer";
export * from "./wrap-panel/wrap-panel"
export * from "./stack-panel/stack-panel"
export * from "./directives/scroll-viewer";
export * from "./directives/stack-panel";
export * from "./directives/wrap-panel";

簡單來看，就是包下面又包含兩個文件夾，文件夾中包含 ng-package.json所以也被認為應該編譯的。編譯的入口是

{"lib": {"entryFile": "public-api.ts"}
}

index.ts 文件看似只是又導出了public-api.ts,實際上沒有這個文件，安裝該包后，無法使用任何public-api.ts導出的類。

編譯并發布

編譯信息在 nexthub.asia-faker-ui2/package.json中指定，每一次發布時，可以修改版本號version,然后再構建發布。
導航到package根目錄，并執行
ng build nexthub.asia-faker-ui2

構建成功就會出現在publish文件夾中

然后導航到 publish執行發布指令即可。

發布成功

安裝你的包之后就可以在另外的項目中使用

并且導入的路徑和ng-zorro-antd類似，最多只有2層（包含項目本身)
參考資料
ng-zorro-antd