Nx和ng-packagr：Angular打包组件并发布使用

此项目是使用Angular CLI 和 Nrwl 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 --collection=@nrwl/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自述文件。

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删