前端使用npm发布一个包（从零开始，完整流程）

2023-11-04 13:16| 来源: 网络整理| 查看: 265

这是我参与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';

【本文地址】

公司简介

联系我们