前一段时间开发了一些基于Vue的插件,感觉还挺好用的,就发布到npm,希望大家都能使用。

下面说一下发布npm 的流程:

注册一个npm账号

进入网址: https://www.npmjs.com 注册一个npm账号。

本人的npm地址为: https://www.npmjs.com/~quanzaiyu

注册后如果需要进行头像设置,需要到 https://en.gravatar.com 注册一个账号(使用的是WordPress账号),添加头像。

开发一个npm包

初始化仓库

每一个npm包都需要一个package.json文件,进行常规配置。

首先进入需要发布npm的目录,输入

1
npm init

进行包初始化,自动生成一个package.json文件,填写一些简单的选项,包括: 包名、版本号、主入口文件、描述、作者、脚本 等。

最终文件大致如下:

1
2
3
4
5
6
7
8
9
10
11
{
"name": "qzy-npm-test",
"version": "1.0.0",
"description": "一个npm测试包",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "quanzaiyu",
"license": "ISC"
}

主入口文件

可以看到,在package.json中指定主入口文件为index.js,那么,就得在项目下创建一个名为index.js的文件。比如:

1
2
3
4
function hello(name){
console.log("hello "+ name);
}
exports.hello = hello;

可以看到,此文件导出了一个名叫hello的函数。

测试此包

将整个文件夹丢到node_modules目录下,在node_modules同级目录下使用npm init 创建 package.json,内容大体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"name": "projects",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"qzy-npm-test": "^1.0.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

再在同级目录下创建一个test.js,内容如下:

1
2
var h = require('qzy-npm-test');
h.hello('Jarrick');

执行node test,控制台输出hello Jarrick。说明此包测试成功。

创建的目录结构如下:

1
2
3
4
5
6
7
projects/ # 测试项目目录
node_modules/ # 包目录
qzy-npm-test/ # 插件目录
index.js # 插件入口文件
package.json # 插件配置文件
test.js # 测试文件
package.json # 测试配置文件

发布一个npm包

以下操作都在 projects/node_modules/qzy-npm-test/ 目录下进行。

添加npm用户

使用之前注册的npm账号进行登录

1
2
3
4
$ npm adduser
username: xxx
password: xxx
email: xxx

发布npm包

1
$ npm publish

发布后可在自己的npm主页看到

更新npm包

如果之后修改过此包,需要修改package.json中的版本号字段version,使其大于当前版本,然后npm publish即可。

如果未更改版本号,会报错:

1
2
3
4
5
6
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published version 1.0.0. : qzy-npm-test
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\quanzaiyu\AppData\Roaming\npm-cache\_logs\2017-09-12T07_59_18_829Z-debug.log

修改版本号后则成功:

1
2
$ npm publish
+ qzy-npm-test@1.0.1

删除npm包

1
2
$ npm unpublish
$ npm unpublish --force

安装使用npm包

安装使用方法很简单,跟以前安装npm包同样的使用即可。

1
npm i <packageName>

比如安装刚才发布的包:

1
npm i qzy-npm-test --save

使用刚才发布的包:

1
2
let a = require('qzy-npm-test')
a.hello('qzy')

执行node index即可看见输出了hello qzy

详细的使用请访问本人的npm: https://www.npmjs.com/~quanzaiyu

参考资料

npm-参考手册

手把手教你用npm发布一个包

怎样删除npm里已经发布的包?