小白怎么发布自己的第一个npm包

236 阅读2分钟

1.先去官网注册账号,注意记住自己的账号密码,邮箱可以使用qq邮箱

www.npmjs.com/

2.准备好自己的包,我这里也是简单的尝试,发布的是webpack版的js方法,如果你要发布组件类的化可以自己使用脚手架,这样就可以不用配置。

下面是我包,非常简单

1.新建文件夹并初始化

npm init -y

2.安装相关依赖包

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

这里主要配置一些打包及Babel(es6转es5插件),下面是我具体的文件目录结构

image.png

image.png

3.编辑代码部分

1.src下是我的代码文件这里我是写了两个方法

image.png

2.再看一下package.josn的解释

image.png

3.再看下webpack配置

image.png

4.发布

1.执行 npm run build
2.查看一下自己的镜像源是否是npm的

npm config get registry

image.png

3.如果不是就设置

npm config set registry registry.npmjs.org/

关于镜像源设置实际是生成了文件(大多数都是这个位置)

image.png

4.登录

npm adduser

image.png 这里有一个npm的登录地址,你只需要点击进去登录就可以了

登录完成之后

npm publish

image.png

然后就发布成功了,我们的邮箱也会收到消息

image.png

再进入我们的npm,点击头像查看包

image.png

5.使用

直接在项目里安装就可(注意你的镜像源,要是npm的镜像源,就是前面设置的,未更改不必理会)

image.png

安装完项目里直接引入 image.png

这里就打印出来了,也可正常使用

image.png

6.更新

image.png

更新只需要更改好内容,和版本号。名称不用改。npm包是跟着名称走的,改了会发布成一个新的npm包。当然你也可以自己捣鼓玩。

总结:本篇是一个小白实践篇,希望可以帮到迷茫的你。相信你看完肯定有所收获,加油,未来的前端领袖。前端这杆大旗等你来扛。