构建发布自己的npm package

作者: falm | 来源:发表于2016-06-18 17:03 被阅读4397次

    文本将会介绍如何构建并发布自己编写的npm包,这里假定你的npm环境已经搭建完成,我们就直接切入主题

    注册账号

    想要在Npm上发布自己的软件包,就必须先在npm官网上注册一个账号
    注册地址


    注册完成后,我们就可以在命令行中登录刚刚注册的账号了:
    $ npm login
    Username: falm
    Password:
    Email: (this IS public) xxx@gmail.com
    Logged in as falm on https://registry.npmjs.org/.
    

    OK登录成功。

    初始化

    在这里我们开始构建Npm包,本文的例子是一个 过去时间的计算工具 比如:

    2..days.ago() #=> 返回两天前的时间
    

    好的,那么接下来就开始创建包目录

    $ mkdir number-timeago && cd number-timeago
    $ npm init
    

    这里执行 npm init 命令之后,会让你填写关于包的信息,只要跟着提示填写就可以

    name: (number-timeago) number-timeago  # 填写包名
    version: (1.0.0)                       # 版本号
    description: numeric time ago like rails ( 2..days.ago() ) # 描述
    entry point: (index.js) number.timeago.js     #  入口文件名
    test command:
    git repository: https://github.com/falm/number-timeago.git  # git仓库地址
    keywords: time,ago,numeric    # 关键字
    author: falm  # 作者
    license: (ISC) MIT   # 许可证
    

    然后就会生成,Npm包的描述文件 package.json

    # package.json
    {
      "name": "number-timeago",
      "version": "1.0.0",
      "description": "numeric time ago like rails ( 2..days.ago() )",
      "main": "number.timeago.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/falm/number-timeago.git"
      },
      "keywords": [
        "time",
        "ago",
        "numeric"
      ],
      "author": "falm",
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/falm/number-timeago/issues"
      },
      "homepage": "https://github.com/falm/number-timeago#readme"
    }
    
    

    主文件

    这里我们将包的主代码,存放到 number.timeago.js 中,

    
    
    (function (NumberTimeAgo) {
    
      if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = NumberTimeAgo;  # node CommonJS
      } else if (typeof define === 'function' && define.amd) {
        define(['number_time_ago'], NumberTimeAgo);  # AMD
      } else {
        NumberTimeAgo();  # 直接引用
      }
    
    })(function () {
    # .....
    });
    
    

    入口文件,主要是一个自调用函数,核心的代码,作为闭包通过参数传入。
    npm 使用CommonJS规范,模块化代码,所以这里将核心函数赋值给 module.exports
    除此之外,还要考虑,有直接在浏览器中使用主文件,或是用AMD加载文件的情况,代码中也予以了支持。

    测试

    没有测试的Npm包,是不健全的,没法给人安全感,如果在生产项目中使用的话,说不定,那天你就崩溃了,所以我们构建的npm包也要有测试。
    这里使用 mochachai 两个test工具进行测试(选用它们是个人偏好,你也可以使用其他的测试框架)

    安装:

    $ npm install mocha --save-dev
    $ npm install chai --save-dev
    

    安装时,使用npm的 --save-dev选项,将会把代码安装到./node_modules下,并且会在package.json中注册开发模式依赖,这样其他人下载你的代码后,运行 ** npm install ** 就可以运行测试了。

      "devDependencies": {
        "chai": "^3.5.0",
        "mocha": "^2.4.5"
      }
    

    接下来创建测试文件。

    $ mkdir test && touch test/number.timeago.js
    

    测试代码:

    
    var expect = require('chai').expect;
    require('../number.timeago.js')();
    
    describe('NumberTimeAgo', function(){
    
      describe('#number-time', function(){
        it('seconds', function(){
          expect(60..seconds).to.eq(1000*60);
        })
        it('days', function () {
          expect(2..days).to.eq(48..hours);
        });
      });
    
      describe('#time-ago', function(){
        it('ago()', function(){
          actualDay = 3..days.ago().getDay();
          expectDay = new Date(new Date() - 3..days).getDay();
          expect(actualDay).to.eq(expectDay);
        }) ;
    
      });
    
    });
    
    

    上面的测试代码这里就不解释了,接下来我们需要将测试命令添加到 ** package.json ** 中:

      "scripts": {
        "test": "node ./node_modules/.bin/mocha test"
      },
    

    在 scripts/test 节点中添加好命令后,我们就可以是用 npm test 运行测试代码了。

    $ npm test 
    > node ./node_modules/.bin/mocha test
      NumberTimeAgo
        #number-time
          ✓ seconds
          ✓ days
        #time-ago
          ✓ ago()
      3 passing (12ms)
    

    Good,测试用例全部通过了。

    发布

    这应该是本文中最简单的一步了,基于一开始我们已经登录了Npm 账号,所以执行一条命令:

    npm publish
    

    搞定。

    结尾

    本文中Npm包的github地址: number-timeago

    相关文章

      网友评论

        本文标题:构建发布自己的npm package

        本文链接:https://www.haomeiwen.com/subject/bfxbdttx.html