Nx和ng-packagr,Angualr 打包组件,发布使用
此项目是使用Angular CLI 和 Nrwl Nx生成的。
现在开始安装项目和完成配置
Nx是企业级Angular应用程序的开源工具包。
Nx旨在帮助您创建和构建企业级Angular应用程序。 它为应用程序项目结构和模式提供了一种有见地的方法。
总结来说就是一个打包的工具
快速入门和文档
生成你的第一个应用程序
打开cmd命令提示符:
安装:
全局安装 yarn global add @angular/cli 或 npm install -g @angular/cli全局安装 yarn global add @nrwl/schematics 或 npm install -g @nrwl/schematics
全局安装 yarn global add @nrwl/nx 或 npm install -g @nrwl/nx
创建Nx工作区的最简单方法是运行:
ng new workspace [email protected]/schematics
workspace可以换成你喜欢的项目名
在项目下安装:yarn add @nrwl/schematics 或 npm install @nrwl/schematics
配置package.json
在package.json中添加如下内容{
......
"distributionManagement": {
"releaseRegistry": "服务器地址:端口/repository/npm/",
"snapshotRegistry": "服务器地址:端口/repository/npmHosted/"
},
"publishConfig": {
"registry": "服务器地址:端口/repository/npmHosted/"
},
"scripts": {
.....
"build:lib": "ng-packagr -p libs/telin-ewifi-gis/package.json"
},
"private": false
......
}
创建应用程序
将新应用程序添加到Nx Workspace是通过使用Angular CLI generate命令完成的。 Nx有一个名为app的示意图,可用于将新应用程序添加到我们的工作区中:在项目中添加:ng generate app myapp 或 ng generate application myapp # same thing, 我只使用过第一种方法创建过程序,建议第一种。第二种可以自己尝试下。
myapp可以换成你喜欢的名称
创建一个Lib
通过使用Angular CLI生成命令将新库添加到Nx Workspace,就像添加一个新应用程序一样。在项目中添加:ng generate lib mylib 或 ng generate library mylib # same thing, 我只使用过第一种方法创建过程序,建议第一种。第二种可以自己尝试下。
mylib可以换成你喜欢的名称
如此,以上步骤就将项目的开发环境和测试环境就配置好了,下面我们可以进行编码了
运行
ng serve 或者自定义端口号 ng serve --port 1200 // 1200为自定义的端口号打包 build
在mylib创建package.json
{
"$schema": "../../node_modules/ng-packagr/package.schema.json",
"name": "telin-ewifi-gis", // 创建的组件名
"version": "2.0.0", // 版本
"ngPackage": {
"lib": {
"entryFile": "src/index.ts" // 入口
},
"dest": "@common/telin-ewifi-gis" // 打的包命名为@common
}
}
package.json 用来配置 ng-packagr 并告诉它去哪里找 index.ts 文件,这个文件通常是用来导出我们组件库的功能模块。(备注:index.ts 文件是 Angular 组件的使用约定)
运行build:lib命令,我们在之前已经配置好了。
编译之后包为:
@common
telin-ewifi-gis
lib
index.d.ts
package.json
telin-ewifi-gis.d.ts
......
在接着,我们进入telin-ewifi-gis文件:
运行命令npm pack,得到了: telin-ewifi-gis-2.0.0.tgz
上传至私服
npm publish可能有问题,我一般都是这么发布的
将这个包上传到npm私服,npm私服地址
更多帮助
要在Angular CLI上获得更多帮助,请使用帮助或查看Angular CLI README自述文件。