Angular6 构建并发布自己的npm包到私有库

wuyongqiu

因为公司业务需求,需要搭建一个公司内部使用的npm私有库,来管理自己封装的angular组件包,搭建的方法参考掘金的基于Docker搭建CNPM私有仓库,下面说一下如何打包并上传到npm库

新建library

创建一个ng项目,来管理和发布组件,运行命令

ng new <project name>

搭建完项目之后,进入项目根目录,运行命令创建一个library库,prefix是组件前缀(如 nz-zorro 的组件前都是 nz-xxx)

ng g library <package name> --prefix <prefix name>

运行完命令之后,项目下会多一个projects的目录,里面有我新建的@zzj/test,因为我package name里面加了@zzj/所以组件目录会有两层

clipboard.png

在/src/lib/目录下,把自己封装的组件拷贝进来

自定义组件输出

我们可以在public_api.ts文件中,配置我们想要暴露出来的组件和服务,并且可以给component,service,module定义别名

clipboard.png

打包并发布

组件完成后,在项目根目录下运行打包命令

ng build <package name>

clipboard.png

这时我们的组件就打包好了,在根目录下会生成一个dist文件夹,里面就有我们打包好的

clipboard.png

打包之前先将npm 注册到自己的私有npm库

npm config set registry=http://172.16.4.5:7001   

cd到打包好的组件目录下,运行发布命令

cd ./dist/zzj/test/

// 发布
npm publish

clipboard.png

这时我们的组件就已经发布到我们的私有npm库上了

clipboard.png

组件安装

在项目中运行命令安装依赖,就可以使用我们自己npm包了

npm install @zzj/test

组件依赖的第三方库

在很多情况下我们的组件可能会依赖特定的环境和第三方库,我们可以通过配置package.json在安装组件的同时安装依赖的其他组件,比如组件是使用了ng-zorro-antd的UI组件,那么就可以在peerDependencies中添加ng-zorro-antd的版本,这样在npm install私有包的同时会检查项目中是否已安装ng-zorro-antd库,如果没有则会一起安装

clipboard.png

阅读 2.5k

debugger记录
前端随笔
50 声望
0 粉丝
0 条评论
50 声望
0 粉丝
文章目录
宣传栏