angular如何发布第三方包(发布npm包)

1.为什么要发布npm包

在我们实际写项目的时候,大家其实可以发现很多功能都是重复的,如果每次都要复制粘贴,那么将变得难以维护以及代码冗余,这个时候我们就需要把重复的功能做成一个通用模块,直接引用就好。下面我将以angular框架为例,采用直接发布与编译后发布两种方式发布第三方组件包。

2.发布第三包的两种通用方法

两种方式

  • 源码共享
  • 编译成ES5后共享

    2.1源码共享(通过npm命令直接发布)

图片

如上图,是一个完整的组件,里面包含了index.ts文件,package.json文件,tsconfig.json文件,src存放组件的文件夹。(其他文件都是生成的,不用管)

其中index.ts为入口文件,里面export导出你要用的公共组件。代码如下:

图片

package.json文件是用来定于项目以及配置发布项目。代码如下:

图片

tsconfig.json文件是用来觉得你项目的编译方式,以及包含那些不包含那些文件,以及入口文件配置等。代码如下:

图片

src文件夹存放你要发布的组件,代码如下:

图片

其中module.ts里面要到处你要公用的组件,代码如下:

图片

做好以上准备工作我们就可以用npm命令直接发布第三方包。

发布命令:

1
2
3
4
npm login  或者  yarn login
//登陆后就可以发布包了 进入包所在目录
npm publish //or
yarn publish

2.2编译后发布第三方包(通过ng-packagr打包)

文件目录可以和上面的一样,没有了tsconfig.json这个文件,但是需要多加两补命令进行编译。第一步就是安装ng-packagr这这插件,输入命令:

1
npm install -D ng-packagr

安装了这个插件之后会自动生成ng-package.json文件,在这个文件里面导入你要到处的公用组件:

1
2
3
4
5
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "index.ts"
}

然后在package.json里面加这个命令:

1
2
3
4
5
{
"scripts": {
"build": "ng-packagr -p package.json"
}
}

然后输入yarn build这个命令,开始打包项目。然后再执行npm publish 发布即可。

3.总结

这个两个都可以发布第三包,一般来说如果你还需要再测试或者修改的话用直接编译方式更好,可以直观的看到源代码以及即时修改测试功能。而用到正式环境的话可以采用ng-packagr,并且ng-packagr可以应用三大框架,并不局限于angular框架。