1. 准备组件
2. 创建打包文件夹及部分配置文件
- 创建 文件夹app-legalentities-root
- 拷贝组件源文件到新的文件夹app-legalentities中
- 创建文件 .npmrc
registry=发布地址
always-auth=true
- 创建文件 ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
- 创建文件 package.json
{
"name": "xxx-xx-test",
"version": "0.0.9",
"scripts": {
"ng": "ng",
"test": "ng test",
"packagr": "ng-packagr -p ng-package.json"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/router": "^18.0.0",
"ng-zorro-antd": "^18.0.1",
"raise-ssh-test": "file:",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/router": "^18.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
}
- 创建文件 public_api.ts
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';
3. 修改配置文件
- 修改 public_api.ts，以下内容为导出的模块、service、modal等
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';
- 修改 package.json
"name": "app-legalentities-root", // 当前组件打包文件夹名称
"version": "0.0.1", // 当前组件版本，每次发布后，下次发布前版本号+1
"scripts": {
...
},
"dependencies": {
"@angular/animations": "^18.0.0", // 公共
"@angular/common": "^18.0.0", //公共
"@angular/compiler": "^18.0.0", //公共
"@angular/core": "^18.0.0", //公共
"@angular/router": "^18.0.0", //公共
"ng-zorro-antd": "^18.0.1", // 当前组件依赖包
"rxjs": "~7.8.0", //公共
"tslib": "^2.3.0", //公共
"zone.js": "~0.14.3" //公共
},
4. down依赖包和安装打包指令
- 使用npm i 安装包
- 执行
npm i ng-packagr //安装打包命令
npm i ng-packagr
- 配置
package.json文件,删除 dependencies 和 devDependencies中的内容
{
"name": "app-legalentities-root", `// 修改打包的名字`
"version": "0.0.2", `// 版本号 +1`
"scripts": {
"ng": "ng",
"test": "ng test",
"packagr": "ng-packagr -p ng-package.json" `//配置打包命令`
},
"private": false // 这个要修改为false，下面的图忘记改了
}
5. 打包开始-生成dist文件
- 执行
npm run packagr 生成dist文件
npm run packagr
- 进入
dist文件目录-执行 `npm pack 生成一个压缩文件
npm pack
6. 安装vsts-npm-auth和配置
- 在app-legalentities-root文件夹下 安装 vsts-npm-auth
npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
- 在dist根目录下创建文件.npmrc，内容同2.3
- 在dist文件夹中配置vsts-npm-auth
vsts-npm-auth -config .npmrc
7. 发布打包文件
在dist文件夹中执行指令 npm publish发布组件
npm publish
8. 引入自定义组件
-
在使用组件的根目录下，即跟package.json同级创建文件.npmrc，内容同2.3
-
安装组件 npm i app-country-select@0.0.1
npm i app-country-select@0.0.1
9. 后续升级
- 在demo框架中测试升级功能，测试通过后执行下一步。
- 版本号 + 1，删除原先的dist文件夹及其内容，完成后执行下一步。
- 打包生成dist，复制文件 .npmrc，然后pack压缩文件，完成后执行下一步
// 在root文件夹中执行
npm run packagr
// 在dist中执行
npm pack
- 在dist文件夹中配置vsts-npm-auth，然后发布组件
// 配置发布环境
vsts-npm-auth -config .npmrc
// 发布组件
npm publish
遇到的问题
- ‘npm run packagr’ 打包报错了
解决方案：将 angular框架的 app-legalentities-root文件夹移到单独的位置，首先删除已经安装好的依赖包，然后执行第四步
