構建，打包并在其他的 Angular 應用中真正使用創造的 Angular 庫。

原文鏈接： The Angular Library Series - Building and Packaging
原文作者： Todd Palmer
譯者按：本文使用 庫 指代 Angular Library 的概念。
本文是 Angular Libaray 系列的第二篇文章，本系列共有三篇文章，涵蓋從創建到打包再到發布的全套流程。
為了行文方便，以下均以我/我們指代原作者。
譯者：尊重，校對者：Ice Panpan

原作者按：如果你是 Angular In Depth 的粉絲，請在推特上支持我們

在 Angular Library 系列的第二篇文章中，我們將會討論以下內容：

探索構建庫的過程。

使用 npm pack 打包庫。

在其他 Angular 應用中從真正意義上使用我們的庫。（在系列文章的第一篇中我們是在與創造的庫同一工作區內的項目中使用庫本身，而本文會在工作區外的項目中使用創造的庫）

快速回顧一下

在系列的第一篇文章中，我們使用 Angular CLI 創建了一個工作區。然后我們使用 Angular CLI 創建了一個 Angular 庫并將其命名為 example-ng6-lib。經過上述操作，我們的工作區中生成了兩個項目：

• 在 projects/example-ng6-lib 目錄下的庫項目。
• 在 src/app 目錄下的主應用項目

我們可以將庫引入到主應用中并使用庫中新添加的組件對庫進行測試。

為了方便你理解上一篇的內容，我創建了一個 Github 倉庫 t-palmer/example-ng6-lib，其包含了上一篇文章中的全部代碼。

構建我們的庫

現在讓我們通過添加一個用于簡化構建的腳本，開始我們的 Angular 庫探索之路的第二站。向根目錄下的 package.json 文件夾中添加一個 build_lib 腳本：

"scripts": {..."build_lib": "ng build example-ng6-lib",... },

現在我們可以通過 npm run build_lib 指令去構建我們的庫了。 該指令會在工作區的 dist 目錄下創建一個名為 example-ng6-lib 的子目錄。

在完成對于庫的構建之后，我們可以使用 ng build 對主應用進行構建。 該指令會在工作區的 dist 目錄下創建一個名為 example-ng6-lib-app 的子目錄。

package.json 文件

太糟糕了，不想要更多的 package.json 文件了。

是的，在庫構建完成后，當前工作區內至少已經有3個 package.json 文件了。這些 package.json 文件可能會讓你覺得困惑為難，所以我們現在理順這些 package.json 文件的思路。

根目錄下的 package.json 文件

這個 package.json 是庫工作區的主 package.json 文件。我們用該文件來列出主應用和庫都需要的依賴項。運行和構建主應用和庫所依賴的所有包都必須列舉在該文件中。

當我們在開發過程中使用 npm install 指令時，新加入的包將會添加到該文件中。

庫項目中的 package.json 文件

庫項目中的 package.json 文件位于 projectsexample-ng6-lib 目錄下，其用于告知 ng-packagr 將什么信息放入庫項目的發布版 package.json 文件中。其 package.json 文件中有三個重要的部分需要注意：

• 名稱

這里的名稱是指庫的名稱。未來如果某位用戶引入庫中的模塊，這個名稱就是出現在 from 部分內的引號中的名稱。舉例來說大概就是：

import { ExampleNg6LibModule } from 'example-ng6-lib';

• 版本號

版本號對于庫而言格外重要，版本號能夠幫助用戶判斷他們是否在使用庫的最新版本。使用 npm 包的開發者通常會默認你遵循版本號語義化規則。

• 依賴項

此項目中只包含用于運行庫所必須的依賴項。因此，你將會看到 dependencies 和 peerDependencies，但是沒有 devDependencies。

你同樣應該在該 package.json 文件中添加那些常見的 npm 內容比如：License，作者，倉庫地址等。

值得注意的是，當你使用 npm install 指令時，新安裝的包只會被添加到根目錄下的 package.json 文件中而不是在庫項目的 package.json 文件中。因此，當你安裝一個庫所需要的包時，你需要將包名稱手動添加到庫項目的 package.json 文件依賴項中。在后續的文章中我們將會討論 dependencies 和 peerDependencies 的區別。

庫的發布版本 package.json 文件

當我們構建庫時庫的發布版本 package.json 文件 由 ng-packagr 生成于 distexample-ng6-lib 文件目錄下。該 package.json 文件會隨著我們的庫一并發布。

使用我們的庫的開發者將會使用 npm install 指令安裝該文件中所涉及的那些依賴項。

因為發布版本的 package.json 文件由 ng-packagr 生成，故而我們不應直接對其進行修改。如果你希望對發布版本的 package.json 文件進行修改，需要更新 projectsexample-ng6-lib 目錄下的 庫項目的 package.json 文件。ng-packagr 以 庫項目的 package.json 文件為基準去生成發布版本的package.json 文件。

記住！永遠不要直接對發布版本的 package.json 文件作出修改。

打包庫

打包庫是指將生成的發布文件進行打包以生成一個 tgz 文件用以手動分享或發布于 npm。

讓我們使用 npm pack 指令在根目錄下的 package.json 文件中創建一個腳本，該腳本用于打包生成的庫。

"scripts": {..."npm_pack": "cd dist/example-ng6-lib && npm pack",... },

現在我們只需要使用指令 npm run npm_pack 就可以完成對庫的打包啦 ！ 這條命令用于將文件目錄指向工作區的 dist 文件夾并執行 npm pack 指令，命令將會在同一目錄下生成一個形如 example-ng6-lib-0.0.1.tgz 的包文件。

就像是任何一個優秀的程序員那樣，我很厭倦做重復的事情。所以我創造了一個新的腳本包含 build_lib 和 npm_pack 兩個腳本的內容。將下述內容加入到主目錄下的 package.json 文件中的腳本對象中去：

"package": "npm run build_lib && npm run npm_pack"

現在看看主目錄下的 package.json 文件，和構建打包相關的腳本如下：

"scripts": {..."build_lib": "ng build example-ng6-lib","npm_pack": "cd dist/example-ng6-lib && npm pack","package": "npm run build_lib && npm run npm_pack" },

注意，執行 package 腳本將會順序執行 build_lib 腳本 和 npm_pack 腳本。

確保在這一步時，你已經成功使用如下指令完成對你的庫的構建和打包：

npm run package

package 腳本做了兩件事：

在 dist/example-ng6-lib 目錄下構建了庫。

在同一目錄下使用 npm pack 指令將庫打包為一個 npm 包，其形如：example-ng6-lib-0.0.1.tgz。

需要注意！即使生成的包是 tgz 文件，你也不能以 tgz 格式直接壓縮 dist 目錄作為包。

總是使用 npm pack 創建 tgz 文件

在其他 Angular 應用中使用庫

現在我們已經構建和打包了一個 Angular 庫，讓我們創建一個新的測試工作區用來模擬其他人如何在真實的項目中使用我們的庫。

創建一個測試工作區

在創造新的測試工作區之前，先確定文件目錄不在你的 example-ng6-lib 工作區內。確保測試工作區在 example-ng6-lib 工作區的父級目錄下。然后使用 Angular CLI 創建一個新的工作區作為已有的 example-ng6-lib 工作區的兄弟工作區。

ng new lib-tester cd lib-tester ng serve

如果你需要提供對IE瀏覽器的支持，查看這篇文章 Angular 與 IE。

當我們打開瀏覽器并指向 http://localhost:4200/，我們看到默認的 Angular 初始頁面。

安裝庫

現在我們已經搭建好了測試應用并希望在應用中使用庫的內容。我們需要執行以下指令：

npm install ../example-ng6-lib/dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz

打開 lib-tester 工作區的下的 package.json 文件，你會看到 example-ng6-lib 已經被添加到項目的依賴項中了。我的 package.json 文件如下所示：

"dependencies": {"@angular/animations": "^6.0.3","@angular/common": "^6.0.3","@angular/compiler": "^6.0.3","@angular/core": "^6.0.3","@angular/forms": "^6.0.3","@angular/http": "^6.0.3","@angular/platform-browser": "^6.0.3","@angular/platform-browser-dynamic": "^6.0.3","@angular/router": "^6.0.3","core-js": "^2.5.4","example-ng6-lib": "file:../example-ng6-lib/dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz","rxjs": "^6.0.0","zone.js": "^0.8.26" },

如果你查看測試工作區內的 node_modules 文件目錄，你會看到一個和庫相對應得 example-ng6-lib 文件夾。

警告：距離我第一次創造庫已經很久了，那時候我還不清楚 npm 中可能存在的風險，所以我想：”等等，我是不是可以用 npm 直接安裝庫項目的 dist 目錄而非其打包的文件？這樣的話是不是當我更新我的庫時，測試應用也一并可以獲取那些更新“。除非你的頭特別鐵，又喜歡和奇怪的第三方引入錯誤作斗爭，否則一定不要像我剛剛說的那樣做。我警告過你了 。

總是！安裝庫的 .tgz 包而不是庫的 dist 目錄。

引入庫模塊

為了使用庫中的組件，我們首先需要向 App module 中添加庫的 module。

為此我們需要在 srcappapp.module.ts 文件中作出兩處修改：

引入 ExampleNg6LibModule 模塊

import { ExampleNg6LibModule } from 'example-ng6-lib';

將 ExampleNg6LibModule 模塊加入到 AppModule 的 imports 數組中。

現在 app.module.ts 應如下所示：

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';import { AppComponent } from './app.component'; import { ExampleNg6LibModule } from 'example-ng6-lib';@NgModule({declarations: [AppComponent],imports: [BrowserModule,ExampleNg6LibModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

使用一個庫中的組件

現在我們就可以像系列文章的第一篇那樣，使用庫中的 enl-foo 組件了。在 lib-tester 應用中修改 AppComponent 組件的 html 模板文件并展示源自于庫的 foo 組件。修改后的 app.component.html 文件如下所示：

<div style="text-align:center"><h1>Welcome to {{ title }}!</h1><enl-foo></enl-foo> </div>

最后我們將瀏覽器指向熟悉的 http://localhost:4200/ 地址，我們可以看到 lib-tester 應用正確地顯示了源自于庫中的 foo 組件。

到此為止，你應該已經學會了如何對庫進行構建和打包。

期待

在本系列的第三部分中，我們將會討論一些輕松的話題，幫助你將庫發布到 npm 上以供下載。

總結

以上是生活随笔為你收集整理的angular linux 打包不成功_Angular Library 系列之 构建和打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。