目錄
目錄... 3
1、 前言... 1
2、 配置... 1
2.1、 建立組件的導出模塊... 1
2.2、 建立組件入口文件... 1
2.3、 配置“ng-package.json”文件... 1
2.4、 配置package.json文件... 2
2.5、 復制git地址... 3
2.6、 配置Jenkins. 3
2.6.1、 新建項目... 3
2.6.2、 確定名稱和項目類型... 3
2.6.3、 填寫項目描述和地址... 4
2.6.4、 選擇SDK.. 4
2.6.5、 填寫代碼地址... 5
2.6.6、 選擇node版本... 5
2.6.7、 添加shell 6
2.6.8、 填寫shell命令... 6
2.6.9、 發布到npmjs公共組件庫... 8
2.6.10、 身份驗證... 8
2.6.11、 保存配置... 9
3、 構建... 9
3.1.1、 構建項目... 9
3.1.2、 查看進度... 10
3.1.3、 查看詳情... 10
4、 常見構建錯誤... 11
4.1.1、 未修改“private”狀態... 11
4.1.2、 無法安裝依賴包... 12
4.1.3、 堆棧調用超出數量限制... 12
4.1.4、 目標倉庫地址返回404. 12
5、 案例... 12
6、 參考... 12
1、 前言
當前前端項目都是用組件化、模塊化的方式進行開發，每個項目都會用到若干公共或私有的組件和模塊。對於項目高頻使用的組件，有必要進行獨立封裝並發布到公司內部組件庫，以提高代碼的可復用性以及加快項目的開發進度。
本文講述了基於node的前端angular組件通過Jenkins平台打包、發布至nexus倉庫管理平台的流程、配置和常見問題及其分析和解決方案。
2、 配置
前端組件開發完成后，需做適當配置才能發布到nexus。
2.1、 建立組件的導出模塊
在node環境進入組件目錄，用以下命令創建一個模塊（名稱與組件保持一致）：
ng generate module MyCompModule –flat
然后編輯該文件，導入和導出相應組件，代碼如下：
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MyCompComponent } from "./my-comp.component"; @NgModule({ declarations: [MyCompComponent], imports: [ CommonModule ], exports: [ MyCompComponent ] }) export class MyCompModule { }
2.2、 建立組件入口文件
在項目根目錄建立“public_api.ts”文件，用於導出組件的模塊，內容如下：
export * from './src/app/component/my-comp.module';
2.3、 配置“ng-package.json”文件
打包組件時，需要在“ng-package.json”文件指定入口文件以及依賴白名單，內容如下：
{ "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" }, "whitelistedNonPeerDependencies": [ "." ] }
其中，“entryFile”即前面建立的入口文件“public_api.ts”；
“whitelistedNonPeerDependencies”是白名單列表（數組），元素為不在“peerDependencies”列表的依賴包，可以寫完整的包名，比如“@angular/core”或只寫“angular”，這將作為正則表達式匹配所有包含“angular”的包名。如果要禁用該特性，則只需包含一個“.”元素。
2.4、 配置package.json文件
打開項目根目錄的“package.json”文件，刪除“dependencies”節點，或將“dependencies”改成“peerDependencies”，設置好“name”等屬性，其中“private”屬性必須設置為“false”，在“scripts”節點配置“packagr”腳本“"packagr": "ng-packagr -p ng-package.json"”，如下代碼所示：
{ "name": "component-demo", "version": "0.1.0", "description": "Component demo", "author": "Jaffray", "private": false, "scripts": { "ng": "ng", "start": "ng serve --open --port 8082", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "packagr": "ng-packagr -p ng-package.json" }, //... }
其中，刪除“dependencies”節點，或將“dependencies”改成“peerDependencies”，是因為打包組件或庫不能同時把所依賴的包也一並打包發布。
做好上述配置即可在node環境執行以下進行打包、發布了：
npm run packagr
cd dist
npm pack
npm publish
接下來將代碼提交到 git 代碼倉庫，然后移步 Jenkins 平台。
2.5、 復制git地址
將項目代碼push到git后，復制git地址並打開Jenkins平台進行配置和發布。
打開項目的“Project”選項卡頁面，分別復制瀏覽器地址欄的地址（Project URL）和箭頭指示處的代碼倉庫地址（Repository URL），如下圖所示。點擊代碼倉庫地址右邊的小圖標可以直接復制該地址：
2.6、 配置Jenkins
2.6.1、 新建項目
在Jenkins平台首頁點擊“New Item”新建項目：
2.6.2、 確定名稱和項目類型
填寫項目名稱，選“Freestyle project”，然后點“OK”按鈕完成新建項目：
2.6.3、 填寫項目描述和地址
在“General”選項卡頁面填寫“Description”，勾選“Github Project”，把之前復制好的項目git地址粘貼到“Project url”右邊的文本框內：
2.6.4、 選擇SDK
由於前端項目並不會用到JDK，因此JDK項目選擇“System”即可：
2.6.5、 填寫代碼地址
在“Source Code Management”選項卡頁面選中“Git”，填入“Repository URL”，“Credentials”選擇能通過驗證的賬號，“Branches to build”填入用於Jenkins發布的分支，比如“develop”或“master”。
“Repository browser”選擇“github”，URL填“gitlab@”和去掉“http://”部分的git repository url，“version”填“1.0”即可：
2.6.6、 選擇node版本
在“Build Enviroment”選項卡頁面勾選“Provide Node & npm/bin/ folder to PATH”，“NodeJS Installation”選擇與項目開發相匹配的版本，比如“NodeJS10/11”，“npmrc file”選擇“-use system default-”：
2.6.7、 添加shell
在“Build”選項卡頁面點擊“Add build step”，點擊彈出菜單的“Execute shell”：
2.6.8、 填寫shell命令
在“Execute shell”的“Command”文本框內填入構建和發布的相關指令：
為了便於在構建日志中查看node和npm的版本、配置以及“package.json”等配置文件內容，可以寫入如下指令：
node -v npm -v npm config list cat package.json cat ng-package.json
由於配置“package.json”時已經把“dependencies”節點刪除或改名，Jenkins又不會安裝“peerDependencies”節點標記的依賴包，因此需要手動寫命令安裝依賴包：
npm install @angular/animations@7.2.0 npm install @angular/common@7.2.0 npm install @angular/compiler@7.2.0 npm install @angular/core@7.2.0 npm install @angular/forms@7.2.0 npm install @angular/platform-browser@7.2.0 npm install @angular/platform-browser-dynamic@7.2.0 npm install @angular/router@7.2.0 npm install core-js@2.5.4 npm install echarts@4.1.0 npm install ng-packagr@4.7.0 npm install ngx-echarts@4.1.0 npm install rxjs@6.3.3 npm install tsickle@0.34.3 npm install tslib@1.9.0 npm install zone.js@0.8.26 npm install npm-login-cmd
指定依賴包版本時需要將版本號寫在包名后面，用“@”間隔。另外，“npm-login-cmd”是用於客戶端登錄，如果服務端配置了驗證信息，就不需要安裝這個插件。
安裝好依賴就可以執行以下命令打包了：
npm run packagr
cd dist
npm pack
之后就可以publish了。Publish時可以通過“registry”參數指定發布目標倉庫，如果不指定，則發布到npm的全局配置“registry”所設定的目標，默認是https://registry.npmjs.org。
npm publish --registry http://192.168.x.y:z/my-repository/
如果之前已經設置過全局“registry”，則不需要“--registry”參數：
npm publish
2.6.9、 發布到 npmjs 公共組件庫
類似發布到內部庫，要發布組件到npmjs公共組件庫，只需要將全局registry設置為“https://registry.npmjs.org”，或者在“npm publish”命令后面指定參數“--registry https://registry.npmjs.org”即可。
2.6.10、 身份驗證
Publish項目需要通過目標的身份驗證。身份驗證有兩種方法：服務端配置驗證信息和客戶端提交驗證信息。
- 服務端配置驗證信息
編輯“.npmrc”文件，增加或修改“registry”、“email”、“_auth”以及“always-auth”：
_auth=*** registry=http://192.168.x.y:z/my-repository/ email=***@***.com always-auth=true
其中，“_auth”是用冒號間隔用戶名和密碼組成的字符串的base64方法編碼結果，即：
_auth = base64Encode(<username>:<password>)
“registry”是用上述信息來驗證的目標倉庫地址；
“email”是用於驗證的郵箱地址，該郵箱與上述由於驗證的用戶、密碼相關。
- 客戶端提交驗證信息
如果需要在客戶端提交登錄信息，則需要在“publish”命令前執行以下命令：
export NPM_USER=<YOUR USERNAME> export NPM_PASS=<YOUR PASSWORD> export NPM_EMAIL=<YOUR EMAIL> npm config set registry http://192.168.x.y:z/my-repository/ npx npm-login-cmd
如下圖：
其中，“npx npm-login-cmd”表示用“npm-login-cmd”插件來實現在自動化環境非交互性登錄，其原理是使用子進程監測“stdout”，當監測到“username”、“password”和“email”等關鍵字時就在“stdin”寫入對應的信息。
2.6.11、 保存配置
配置完畢，點擊當前頁面左下角的“Save”或“Apply”按鈕即可保存配置。其中，點擊“Apply”按鈕會繼續停留在當前頁面等待進一步修改配置；點擊“Save”按鈕則回到當前Jenkins項目的首頁，可以進行構建等操作。如下圖：
3、 構建
3.1.1、 構建項目
在Jenkins項目的首頁，點擊左側菜單中的“Build Now”即可對項目進行構建。如下如：
3.1.2、 查看進度
在“Build History”區域將出現當前項目的構建進度：
3.1.3、 查看詳情
點擊編號，即可查看本次構建詳情：
其中，編號左側的藍色圓球圖標表示構建成功，紅色圓球圖標表示構建失敗；點擊左側“Changes”鏈接可以查看代碼變更詳情；點擊“Console Output”可以查看構建過程中腳本執行日志，如果腳本執行出錯，可以根據日志做相應修改並重新構建。如下圖：
4、 常見構建錯誤
4.1.1、 未修改“private”狀態
錯誤信息：This package has been marked as private
問題分析：用npm命令創建前端項目時，由於“package.json”文件中的“private”默認為“true”，提交代碼時往往忘記改變該值。
解決方案：編輯“package.json”文件，將“private”設為“false”即可。
4.1.2、 無法安裝依賴包
錯誤信息：404 Not Found: @types/echarts@^4.1.3
問題分析：可能是registry設置不當
解決方案：將registry設置為npmjs或淘寶的registry。比如：
npm config set registry https://registry.npmjs.org
4.1.3、 堆棧調用超出數量限制
錯誤信息：Maximum call stack size exceeded
問題分析：包的依賴關系比較復雜，當網絡狀況不佳出現該問題。
解決方案：設置registry為淘寶的registry。比如：
npm config set registry https://registry.npm.taobao.org
4.1.4、 目標倉庫地址返回404
錯誤信息：npm ERR! code E404， npm ERR! 404 Registry returned 404 for PUT on http://192.168.x.y:z/repository
問題分析：設置全局registry時URL不正確。私有庫地址一般包含路徑，URL結尾需要帶上斜線“/”。
解決方案：設置正確的registry。比如：
npm config set registry http://192.168.x.y:z/repository/
5、 案例
http://192.168.x.y:z/jenkins/job/x-angular-components/
6、 參考
https://www.npmjs.com/package/npm-auth
https://help.sonatype.com/repomanager2/node-packaged-modules-and-npm-registries