这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
写在前面：
- 个人前端网站：zhangqiang.hk.cn
- 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
0 前言
当我们在写前端项目时，会用到antd组件库或者是element组件库，都会执行一个npm install antd --save或 npm i element-ui -S 这样的语句，这就这些作者把源码的包发布到了npm官网上，我们可以直接通过npm 来安装他们，然后再在程序里面直接引用使用，使开发效率得到大大提升。今天我们将要进行的就是如何在npm上发布一个自己的包，然后再在程序中引用它，学会了以后大家可以写一些可以提高开发效率的包分享给小伙伴哦~
1 npm官网注册一个自己的账号
官网链接：npm (npmjs.com)
2 准备好自己要发的工具包
比如下面这个，就是我要发的包，我将平时开发经常用的方法函数整合到了一个包里，然后通过npm发布，这样就可以分享给一起开发的前端小伙伴用啦~ 自己用起来的话也很方便。
作为发包测试的话，大家可以先写少一点，比如下面这段代码，这样包里面就只包含这一个方法：
export const add = (a: number, b: number) => {
return a + b + 1;
}
2.1 配置package.josn
首先我们要在vscode的终端里面运行一下npm init，之后程序会初始化一个package.json的文件，然后我们主要是要改这两个地方：
2.2 ts转译js
如果用js写的，可以忽略2.2这一小节。用ts写的话要转译成js格式再发包。
具体操作如下：
- 安装依赖
npm install -g typescript
- 开始转译，这里是将index.ts转译成js
tsc index.ts
可以参考这篇：TS安装编译配置自动生成.js文件 （可以实时编译ts文件）
3 开始发包
3.1 确认npm的所用源
npm config get registry
如果不是的话，需要设置成npm官网的源，
npm config set registry https://registry.npmjs.org
上面这句可以实现。
3.2 登录自己的npm账号
npm adduser
根据提示填自己官网注册的信息即可。
3.3 发布包
npm publish --access public
这一句将会把你现在的程序包发布到npm官网上，而且是公有的包，任何一个用户都可以使用
4 使用与测试自己发布的包
4.1 本地测试（不发布）
这里可以参考这个链接：npm link的使用
4.2 发布后在使用中测试
这里的逻辑是，我们把包发布到npm官网上，我再通过另一个前端项目直接安装引用，测试。
步骤为 ，
安装包
npm install xxx （xxx为我们发包的名字）
在程序中引用
import {} from 'xxx';
