记录一个 NPM 包的开发 -- smms

最后更新于2017-10-23 22:15:20

其实主要想写一个图床网站的上传方法,顺便记录一次 npm 包的开发。

第一步、 初始化一个 npm 包

mkdir upload-img && cd upload-img
npm init

然后按提示输入 package nameversiondescription 等信息就可以了。 初始化完会在当前目录生成一个 package.json 文件,熟悉 现代PHP 的应该都知道,这个文件跟 composer.json 的作用是一样的,都用于描述这个项目的各项信息,包括依赖和脚本等。

第二步、开始编码

添加 index.js 文件,并向文件写入以下内容。

默认的入口文件是 index.js ,当然你可以随意更改。

/*!
 Copyright (c) 2017 96qbhy.
 Licensed under the MIT License (MIT)
 */
/* global define */
(function () {
    'use strict';
    var axios = window.axios || require('axios');
    function uploadImg(file) {
        var data = new FormData();
        data.append('smfile', file);
        data.append('ssl', true);
        return axios.post('https://sm.ms/api/upload', data).then(data => data.data);
    }
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = uploadImg;
    } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
        // register as 'uploadImg', consistent with npm package name
        define('uploadImg', [], function () {
            return uploadImg;
        });
    } else {
        window.uploadImg = uploadImg;
    }
}());

然后基本套路走一发, 代码就那么多。

实际代码已更新,最新的代码请移步该项目的 github仓库。 作为一个开源项目,一个好的 readme.md 必不可少,此处我省略了 readme.md 的书写,因为太多了。

第三步、发布

  1. 注册 npmjs 帐号,已注册的请忽略。
  2. 执行 npm adduser ,按提示输入 username 和 password 以及 email。
  3. 执行 npm publish

OK,装逼完毕,这样就完成了一个简单的 npm 包的开发和发布。

第四步、添加到 github 仓库

  1. github 创建仓库。
  2. 执行 git init,添加 .gititnore 文件,排除需要排除的文件,例如 node_modules.idea 等。
  3. 添加远端仓库 , git remote add origin {仓库地址}
  4. add + commit + push

该项目我托管在 github , 地址是 https://github.com/qbhy/smms sm.ms 是一款免费的图床网站,smmssm.ms 的 js 上传插件 。