前一段时间开发了一些基于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里已经发布的包？