手把手教你玩转npm包

【npm是什么】

官网是这个：npm，

官网介绍：npm is the package manager for javascript，

npm是js的包管理器，更多的用于nodejs端。

基本上每种语言都有自己的包管理器，nodejs是npm以及yarn；

java是ant，maven，gradle；

python有很多包管理器；

ruby是rubygem。

如果你熟悉以上某种包管理器，那么npm也是大同小异的。

【npm常用命令】

基于package.json安装项目依赖包

npm install

安装一个npm包

npm install express
or
npm i express

卸载一个npm包

	
npm uninstall express

列出当前使用到的npm包

npm list

以上命令添加-g后为全局使用，

熟悉以上命令基本可以简单使用npm了。

【npm init】

熟悉常用命令后，开始各种npm install，或者npm install -g，

某天想自己发布一个npm包，发现有点茫然，那就从头开始。

第一步是npm init，

首先创建一个文件夹，然后cd到文件夹下，然后执行npm init，

发现需要你输入一些信息，依次输入，

package name，包名是什么，也就是最终其他人npm install xxx，这个xxx就是包名；

version，版本号；

description：描述；

entry point：入口js；

test command：测试命令，暂时空开；

gir repository：git库地址，暂时空开；

keywords：关键字；

author：作者，先写你的名字；

license：协议；

最后询问你是否生成package.json，输入y回车。

【写一个简单的例子】

在这个文件夹下，新建lib，test文件夹，

新建index.js文件，

// nothing

新建lib/qiao.test.demo2.js文件，

/**
* say hello
*/
exports.sayHello = function(){
    console.log('hello world!');
};

新建test/test.js文件，

var qiaoTestDemo2 = require('../lib/qiao.test.demo2.js');

function test(){
    qiaoTestDemo2.sayHello();
}

test();

测试一下，执行node test/test.js，

【开始第一次发布】

创建帐号

首先需要注册一个帐号，输入npm adduser，然后输入姓名，密码，邮箱，注意，密码不能过于简单

激活邮箱

npm adduser成功后，npm会给你的邮箱发一封邮件，需要激活，如果不激活就发布npm包会报错，如下

首次发布

npm publish

验证1

在npm官网搜索qiao.test.demo2，可以搜索到

验证2

npm install qiao.test.demo2可以安装

【实战一个小功能】

如上，已经可以发布一个npm包了，但是发布的包基本没啥用，

接下来实战一个小功能，基于archiver封装一个压缩zip的功能，

首先快速的看一遍archiver的文档：archiver - npm

提炼出核心代码到lib/qiao.test.demo2.js中，如下

var fs             = require('fs');
var archiver     = require('archiver');

/**
* zip folder
* destZip, d:/1.zip
* sourceFolder, d:/test1 
* cb, callback
*/
exports.zipFolder = function(destZip, sourceFolder, cb){
    // init
    var output = fs.createWriteStream(destZip);
    var archive = archiver('zip', {
        zlib: { level: 9 }
    });
     
    // on
    output.on('close', function() {
        cb(null, '压缩完成！');
    });
    archive.on('error', function(err) {
        cb(err);
    });

    // zip
    archive.pipe(output);
    archive.directory(sourceFolder, false);
    archive.finalize();
};

test/test.js修改为：

var qiaoTestDemo2 = require('../lib/qiao.test.demo2.js');

function test(){
    var destZip            = 'd:/1.zip';
    var sourceFolder     = 'd:/test1';

    qiaoTestDemo2.zipFolder(destZip, sourceFolder, function(err, msg){
        if(err) throw err;

        console.log(msg);
    });
}

test();

执行node test/test.js发现报错，如下

原来是没有引入archiver，这个时候执行npm install archiver，

然后再次执行node test/test.js，看到压缩完成，如下

【再次发布】

压缩一个文件夹的功能，基于archiver包已经实现，现在可以再次发包，

需要将package.json中的version修改为0.0.2，如下

{
  "name": "qiao.test.demo2",
  "version": "0.0.2",
  "description": "qiao test demo 2",
  "main": "index.js",
  "scripts": {
  },
  "keywords": [
    "qiao",
    "test",
    "demo",
    "2"
  ],
  "author": "qiaowenbin",
  "license": "MIT",
  "dependencies": {
    "archiver": "^2.1.0"
  }
}

同时你会发现，dependencies中添加对archiver的依赖

再次执行npm publish，发布qiao.test.demo2 0.0.2版本成功

【使用自己的包】

npm包已经发布完毕，现在要测试如果是其他人安装你的包后是否可以使用，

新建一个文件夹，写一个test.js如下

var qiaoTestDemo2 = require('qiao.test.demo2');

function test(){
    var destZip            = 'd:/1.zip';
    var sourceFolder     = 'd:/test1';

    qiaoTestDemo2.zipFolder(destZip, sourceFolder, function(err, msg){
        if(err) throw err;

        console.log(msg);
    });
}

test();

注意，和之前test/test.js的不同是require不同，这次是直接引用，

然后执行node test.js，发现报错，是没有引用qiao.test.demo2包，

执行npm install qiao.test.demo2，安装包，再次执行node test.js，

发现还是报错，报错如下：

zipFolder未定义，但是lib/qiao.test.demo2.js中是有定义的，问题出在哪里，

出在index.js中，因为index.js是你这个包的入口，而目前的index.js是空的，需要修改为：

module.exports = require('./lib/qiao.test.demo2');

再次发布为0.0.3版本，再次安装，再次执行node test.js，成功，

【小结一下】

目前可以做到的是：

1.注册npm

2.发布npm包

3.实现压缩文件夹功能

4.将该包对外

【readme.md】

在npm官网上搜索qiao.test.demo2，点进去，发现页面是空白的，

不像其他npm包一样，有详细的介绍，如下

因为包下没有readme.md文件，添加一个readme.md，如下，markdown的语法可以自行百度，

# qiao.test.demo2
---
zip folder by archiver

# install
---
npm install qiao.test.demo2

# zip folder
---
    var qiaoTestDemo2 = require('../lib/qiao.test.demo2.js');

    function test(){
        var destZip            = 'd:/1.zip';
        var sourceFolder     = 'd:/test1';

        qiaoTestDemo2.zipFolder(destZip, sourceFolder, function(err, msg){
            if(err) throw err;

            console.log(msg);
        });
    }

    test();

将package.json中的version修改为0.0.4，再次npm publish，刷新npm页面，如下

【丰富package.json】

接下来还可以丰富下package.json文件，最简单的方法是看文档，或者下载一个成熟的npm包进行模仿，

比如npm install express后看express的package.json是怎么写的，

丰富后如下，主要丰富了author，homepage，repository，

{
  "name": "qiao.test.demo2",
  "version": "0.0.4",
  "description": "qiao test demo 2",
  "main": "index.js",
  "scripts": {
  },
  "keywords": [
    "qiao",
    "test",
    "demo",
    "2"
  ],
  "author": {
    "name": "qiaowenbin",
    "email": "npm@insistime.com",
    "url": "http://insistime.com"
  },
  "homepage": "http://insistime.com/",
  "license": "MIT",
  "dependencies": {
    "archiver": "^2.1.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ your github url"
  }
}

一般npm包都会开源到github上一份，package.json中的repository会指向github，用户可以直接查看源码

【.npmignore】

需要注意的一点是npm发布后不能撤回，也就是千万不要把一些重要的配置文件发布上去，

这个时候需要用的npmignore文件，类似gitignore，

配置好后就可以忽略一些不想上传的文件

【npm脚本】

细心的同学会发现，最开始npm init的时候有一项是test commad，之前的空的，

现在需要稍作修改，在package.json中修改为：

"scripts": {
      "test" : "node test/test.js"
  },

之后就可以执行npm run test，如下

你也可以添加其他脚本，在package.json中的script下添加，key-value，value为要执行的命令，

然后就可以使用npm run key的方式执行对应的value命令

【总结】

1.npm注册

2.npm发包

3.实现压缩文件夹功能

4.将npm包对外

5.添加readme.md

6.丰富package.json

7.添加npmignore

8.使用npm脚本