Nx和ng-packagr,Angualr 打包组件,发布使用

此项目是使用Angular CLINrwl Nx生成的。


现在开始安装项目和完成配置
Nx是企业级Angular应用程序的开源工具包。
Nx旨在帮助您创建和构建企业级Angular应用程序。 它为应用程序项目结构和模式提供了一种有见地的方法。

总结来说就是一个打包的工具


快速入门和文档

观看关于如何开始使用Nx的5分钟视频。

生成你的第一个应用程序

打开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/schematicsnpm 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 myappng generate application myapp # same thing, 我只使用过第一种方法创建过程序,建议第一种。第二种可以自己尝试下。
myapp可以换成你喜欢的名称

创建一个Lib

通过使用Angular CLI生成命令将新库添加到Nx Workspace,就像添加一个新应用程序一样。
在项目中添加:ng generate lib mylibng 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

可能有问题,我一般都是这么发布的

Nx和ng-packagr,Angualr 打包组件,发布使用


将这个包上传到npm私服,npm私服地址

更多帮助
要在Angular CLI上获得更多帮助,请使用帮助或查看Angular CLI README自述文件。