記錄一個 NPM 包的開發 -- smms

qbhy發表於2017-10-23

其實主要想寫一個圖床網站的上傳方法,順便記錄一次 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/96qbhy/smms
    sm.ms 是一款免費的圖床網站,smmssm.ms 的 js 上傳外掛 。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章