使用Angular-CLI构建NPM包的方法

1.创建项目

# project_name ：创建的项目名称
ng new project_name

2.创建第三方包（我们要构建的npm包）

cd project_name

# library_name ：创建的包的名称(如 zorro)
# prefix ：组件前缀(如 nz-zorro 的组件前都是 nz-)
ng g library library_name --prefix prefix

上面命令执行后会在我们项目根目录生成projects目录，目录里就是刚才generate的第三方library，如下图：

3.构建自己的模块

编辑模块，实现我们需要的功能，我在改模块中加入了directive.ts和models.ts，如下图：

directive.ts只在模块内部使用，导入在当前module.ts里，如下：

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';
import { nepreviewcomponent } from './ne-preview.component';

import { viewerdirectivemodule } from './ne-preview.directive';

@ngmodule({
 imports: [
 browsermodule,
 viewerdirectivemodule # 这里
 ],
 declarations: [nepreviewcomponent],
 exports: [nepreviewcomponent]
})
export class nepreviewmodule { }

models.ts可能在外部使用，则需在public_api.ts导出，如下：

export * from './lib/ne-preview.service';
export * from './lib/ne-preview.component';
export * from './lib/ne-preview.module';

export * from './lib/ne-preview.model'; # 这个是新加，其他为自动生成

4.构建npm包

打包前修改package.json中的项目信息，每次更新npm包需修改version，版本相同提交不上去，可以手动修改，也可命令修改，如下：

npm version prepatch

更多操作

# 版本号从 1.2.3 变成 1.2.4-0，就是 1.2.4 版本的第一个预发布版本。
npm version prepatch

# 版本号从 1.2.4-0 变成 1.3.0-0，就是 1.3.0 版本的第一个预发布版本。
npm version preminor

# 版本号从 1.2.3 变成 2.0.0-0，就是 2.0.0 版本的第一个预发布版本。
npm version premajor

# 版本号从 2.0.0-0 变成 2.0.0-1，就是使预发布版本号加一。
npm version prerelease

编译打包

#切到项目根目录
cd 项目根目录路径
ng build library_name

编译成功，如下图：

在项目根目录会生成dist目录，如下：

到这里我们的npm包就制作完成了，接下来就是发布到npm仓库～

5.发布npm包

这里得先登录npm，

npm login # 详细操作自行百度

#切到目录
cd dist/library_name
#发布
npm publish

6.使用发布的npm包

安装我们发布的包

# npm_package_name ：projects/library_name/package.json 里面的 name，默认为：library_name
npm install npm_package_name

在项目app.module.ts中引入我们创建的组件，如下：

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';

import { appcomponent } from './app.component';
import { browseranimationsmodule } from '@angular/platform-browser/animations';
import { formsmodule } from '@angular/forms';
import { httpclientmodule } from '@angular/common/http';
import { registerlocaledata } from '@angular/common';
import zh from '@angular/common/locales/zh';

import { echoimagepreviewmodule } from './echo-image-preview/echo-image-preview.module';
import { echomodulemodule } from 'echo-image-preview';
import { nepreviewmodule } from 'ne-img-preview'; # <===这里


registerlocaledata(zh);

@ngmodule({
 declarations: [
 appcomponent
 ],
 imports: [
 browsermodule,
 browseranimationsmodule,
 formsmodule,
 httpclientmodule,
 echoimagepreviewmodule,
 echomodulemodule,
 nepreviewmodule # <===这里
 ],
 providers: [],
 bootstrap: [appcomponent]
})
export class appmodule { }

model.ts直接引用：

import { imglist } from 'ne-img-preview';

组件使用，如下：

<ne-ne-preview [imglist]="imglist"></ne-ne-preview>

感谢：harlan：如何构建一个angular6的第三方npm包

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。