在NPM發(fā)布自己造的輪子的方法步驟

更新時(shí)間：2019年03月09日 10:16:35 作者：Croc_wend

這篇文章主要介紹了在NPM發(fā)布自己造的輪子的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1、前言

自從Node.js出現(xiàn)，它的好基友npm(node package manager)也是我們?nèi)粘ｉ_發(fā)中必不可少的東西。npm讓js實(shí)現(xiàn)了模塊化，使得復(fù)用其他人寫好的模塊（搬磚）變得更加方便，也讓我們可以分享一些自己的作品給大家使用（造輪子），今天這里我就給大家分享一個(gè)用命令行壓縮圖片的工具，它的用法大致是這樣的：

// 全局安裝后，在圖片目錄下，運(yùn)行這行
$ tinyhere

這樣就把文件夾內(nèi)的圖片進(jìn)行壓縮。這里壓縮采用的是 tinypng 提供的接口，壓縮率大致上是50%，基本可以壓一半的大小。以前在寫項(xiàng)目的時(shí)候，測試驗(yàn)收完成后總是要自己手動(dòng)去壓一次圖片，后來想把這個(gè)枯燥重復(fù)的事自動(dòng)化去完成（懶），但是公司腳手架又沒有集成這個(gè)東西，就想自己寫一個(gè)輪子做出來用用就好了。它的名字叫做tinyhere，大家可以去安裝使用試一下

$ npm i tinyhere -g

2、npm簡介

如果要寫一個(gè)模塊發(fā)布到npm，那么首先要了解一下npm的用法。

給這個(gè)模塊建一個(gè)文件夾，然后在目錄內(nèi)運(yùn)行npm init來初始化它的package.json，就是這個(gè)包的描述

// 個(gè)人比較喜歡后面帶--yes，它會(huì)生成一個(gè)帶默認(rèn)參數(shù)的package.json
$ npm init (--yes)

package.json詳情：

{
 "name": "pkgname", // 包名，默認(rèn)文件夾的名字
 "version": "1.0.0",
 "description": "my package",
 "main": "index.js", // 如果只是用來全局安裝的話，可以不寫
 "bin": "cli", // 如果是命令行使用的話，必須要這個(gè)，名字就是命令名
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1" // npm run test對應(yīng)的test
 },
 "keywords": ['cli', 'images', 'compress'],
 "author": "croc-wend",
 "license": "MIT",
 ...
}

更多配置信息可以參考一下vue的package.json的https://github.com/vuejs/vue/blob/dev/package.json

初始化完成之后，你就可以著手寫這個(gè)包了，當(dāng)你覺得你寫好了之后，就可以發(fā)布到npm上面

npm login
npm publish
+ pkgname@1.0.0 // 成功

這時(shí)，你在npm上面搜你的包名，你寫在package.json 的信息都會(huì)被解析，然后你的包的頁面介紹內(nèi)容就是你的README.md

3、寫這個(gè)包

包初始化好了之后，我們就可以開始寫這個(gè)包了

對于這個(gè)壓縮工具來說，要用到的素材只有兩個(gè)，tinypng接口要用到的 api-key，需要壓縮的圖片，所以我對這兩個(gè)素材需要用到的一些操作進(jìn)行了以下分析：

我的初衷是想把這個(gè)命令寫的盡量簡單，讓我可以聯(lián)想到壓縮圖片=簡單，所以我待定了整個(gè)包只有一個(gè)單詞就能跑，是這樣：

$ tinyhere

其他的操作都放在子命令和可選項(xiàng)上。

然后開始劃分項(xiàng)目結(jié)構(gòu)

大致上是這樣，把全局命令執(zhí)行的 tinyhere 放在bin目錄下，然后subCommand負(fù)責(zé)提供操作函數(shù)，然后把可復(fù)用的函數(shù)（比如讀寫操作）抽離出來放在util上，比較復(fù)雜的功能單獨(dú)抽離成一個(gè)文件，比如compress，然后導(dǎo)出一個(gè)函數(shù)給subCommand。至于存放用戶的api-key，就存放在data下面的key里。

tinyhere的執(zhí)行文件就負(fù)責(zé)解析用戶的輸入，然后執(zhí)行subCommand給出的對應(yīng)函數(shù)。

4、過程解析

壓縮圖片的這個(gè)包的過程是這樣的：

1、解析當(dāng)前目錄內(nèi)的所有圖片文件，這里應(yīng)該根據(jù)二進(jìn)制流及文件頭獲取文件類型mime-type，然后讀取文件二進(jìn)制的頭信息，獲取其真實(shí)的文件類型，來判斷它是否真的是圖片文件，而不是那些僅僅是后綴名改成.png的假貨

2、如果用戶有要求把壓縮的圖片存放到指定目錄，那就需要生成一個(gè)文件夾來存放它們。那么，首先要判斷這個(gè)路徑是否合法，然后再去生成這個(gè)目錄

3、判斷用戶的api-key的剩余次數(shù)是否足夠這次的圖片壓縮，如果這個(gè)key不夠，就換到下一個(gè)key，知道遍歷文件內(nèi)所有的key找到有可用的key為止。

4、圖片和key都有了，這時(shí)可以進(jìn)行壓縮了。用一個(gè)數(shù)組把壓縮失敗的存起來，然后每次壓縮完成都輸出提示，在所有圖片都處理完成后，如果存在壓縮失敗的，就詢問是否把壓縮失敗的圖繼續(xù)壓縮

5、這樣，一次壓縮就處理完成了。壓縮過的圖片會(huì)覆蓋原有的圖片，或者是存放到指定的路徑里

ps：$ tinyhere deep >>> 把目錄內(nèi)的所有圖片都進(jìn)行壓縮（含子目錄）。這個(gè)命令和上述的主命令的流程有點(diǎn)不同，目前有點(diǎn)頭緒，還沒有開發(fā)完成，考慮到文件系統(tǒng)是樹形結(jié)構(gòu)，我目前的想法是通過深度遍歷，把存在圖片的文件夾當(dāng)作一個(gè)單位，然后遞歸執(zhí)行壓縮。

其他：

這里吐槽一下tinypng 的接口寫的真的爛。。在查詢key的合法性的 validate 函數(shù)只接受報(bào)錯(cuò)的回調(diào)，但是成功卻沒有任何動(dòng)作。我真是服了，之前是做延時(shí)來判斷用戶的key的合法性，最后實(shí)在是受不了這個(gè)bug一樣的寫法了，決定用Object.defineProperty來監(jiān)聽它的使用次數(shù)的變化。如果它的setter被調(diào)用則說明它是一個(gè)合法的key了

5、小結(jié)

在這里，我想跟大家說，如果你做了一個(gè)你覺得很酷的東西，也想給更多的人去使用，來讓它變得更好，選擇發(fā)布在NPM上面就是一個(gè)非常好的途徑，看了上面的內(nèi)容你會(huì)發(fā)現(xiàn)分享其實(shí)真的不難，你也有機(jī)會(huì)讓世界看到屬于你的風(fēng)采！

如果大家覺得我有哪里寫錯(cuò)了，寫得不好，有其它什么建議（夸獎(jiǎng)），非常歡迎大家補(bǔ)充。希望能讓大家交流意見，相互學(xué)習(xí)，一起進(jìn)步！我是一名 19 的應(yīng)屆新人，以上就是今天的分享，新手上路中，后續(xù)不定期周更（或者是月更哈哈），我會(huì)努力讓自己變得更優(yōu)秀、寫出更好的文章，文章中有不對之處，煩請各位大神斧正。如果你覺得這篇文章對你有所幫助，請記得點(diǎn)贊或者品論留言哦～。

6、寫在最后

歡迎大家提issue或者建議！地址在這:

https://github.com/Croc-ye/tinyhere

https://www.npmjs.com/package/tinyhere

最后貼上部分代碼，內(nèi)容過長，可以跳過哦

bin/tinyhere

#!/usr/bin/env node

const commander = require('commander');
const {init, addKey, deleteKey, emptyKey, list, compress} = require('../libs/subCommand.js');
const {getKeys} = require('../libs/util.js');

// 主命令
commander
.version(require('../package').version, '-v, --version')
.usage('[options]')
.option('-p, --path <newPath>', '壓縮后的圖片存放到指定路徑（使用相對路徑）')
.option('-a, --add <key>', '添加api-key')
.option('--delete <key>', '刪除指定api-key')
.option('-l, --list', '顯示已儲(chǔ)存的api-key')
.option('--empty', '清空已儲(chǔ)存的api-key')

// 子命令
commander
.command('deep')
.description('把該目錄內(nèi)的所有圖片（含子目錄）的圖片都進(jìn)行壓縮')
.action(()=> {
  // deepCompress();
  console.log('尚未完成，敬請期待');
})

commander.parse(process.argv);


// 選擇入口
if (commander.path) {
  // 把圖片存放到其他路徑
  compress(commander.path);
} else if (commander.add) {
  // 添加api-key
  addKey(commander.add);
} else if (commander.delete) {
  // 刪除api-key
  deleteKey(commander.delete);
} else if (commander.list) {
  // 顯示api-key
  list();
} else if (commander.empty) {
  // 清空api-key
  emptyKey();
} else {
  // 主命令
  if (typeof commander.args[0] === 'object') {
    // 子命令
    return;
  }
  if (commander.args.length !== 0) {
    console.log('未知命令');
    return;
  }
  if (getKeys().length === 0) {
    console.log('請初始化你的api-key')
    init();
  } else {
    compress();
  }
};

libs/compress.js

const tinify = require('tinify');
const fs = require("fs");
const path = require('path');
const imageinfo = require('imageinfo');
const inquirer = require('inquirer');
const {checkApiKey, getKeys} = require('./util');

// 對當(dāng)前目錄內(nèi)的圖片進(jìn)行壓縮
const compress = (newPath = '')=> {
  const imageList = readDir();
  if (imageList.length === 0) {
    console.log('當(dāng)前目錄內(nèi)無可用于壓縮的圖片');
    return;
  }
  newPath = path.join(process.cwd(), newPath);
  mkDir(newPath);

  findValidateKey(imageList.length);
  console.log('===========開始?jí)嚎s=========');
  if (newPath !== process.cwd()) {
    console.log('壓縮到： ' + newPath.replace(/\./g, ''));
  }
  compressArray(imageList, newPath);
};

// 生成目錄路徑
const mkDir = (filePath)=> {
  if (filePath && dirExists(filePath) === false) {
    fs.mkdirSync(filePath);
  }
}

// 判斷目錄是否存在
const dirExists = (filePath)=> {
  let res = false;
  try {
    res = fs.existsSync(filePath);
  } catch (error) {
    console.log('非法路徑');
    process.exit();
  }
  return res;
};


/**
 * 檢查api-key剩余次數(shù)是否大于500
 * @param {*} count 本次需要壓縮的圖片數(shù)目
 */
const checkCompressionCount = (count = 0)=> {
  return (500 - tinify.compressionCount - count) >> 0;
}

/**
 * 找到可用的api-key
 * @param {*} imageLength 本次需要壓縮的圖片數(shù)目
 */
const findValidateKey = async imageLength=> { // bug高發(fā)處
  const keys = getKeys();
  for (let i = 0; i < keys.length; i++) {
    await checkApiKey(keys[i]);
    res = checkCompressionCount(imageLength);
    if (res) return;
  }
  console.log('已存儲(chǔ)的所有api-key都超出了本月500張限制，如果要繼續(xù)使用請?zhí)砑有碌腶pi-key');
  process.exit();
}

// 獲取當(dāng)前目錄的所有png/jpg文件
const readDir = ()=> {
  const filePath = process.cwd()
  const arr = fs.readdirSync(filePath).filter(item=> {
    // 這里應(yīng)該根據(jù)二進(jìn)制流及文件頭獲取文件類型mime-type，然后讀取文件二進(jìn)制的頭信息，獲取其真實(shí)的文件類型，對與通過后綴名獲得的文件類型進(jìn)行比較。
    if (/(\.png|\.jpg|\.jpeg)$/.test(item)) { // 求不要出現(xiàn)奇奇怪怪的文件名。。
      const fileInfo = fs.readFileSync(item);
      const info = imageinfo(fileInfo);
      return /png|jpg|jpeg/.test(info.mimeType);
    }
    return false;
  });
  return arr;
};

/**
 * 對數(shù)組內(nèi)的圖片名進(jìn)行壓縮
 * @param {*} imageList 存放圖片名的數(shù)組
 * @param {*} newPath 壓縮后的圖片的存放地址
 */
const compressArray = (imageList, newPath)=> {
  const failList = [];
  imageList.forEach(item=> {
    compressImg(item, imageList.length, failList, newPath);
  });
}

/**
 * 壓縮給定名稱的圖片
 * @param {*} name 文件名
 * @param {*} fullLen 全部文件數(shù)量
 * @param {*} failsList 壓縮失敗的數(shù)組
 * @param {*} filePath 用來存放的新地址
 */
const compressImg = (name, fullLen, failsList, filePath)=> {
  fs.readFile(name, function(err, sourceData) {
    if (err) throw err;
    tinify.fromBuffer(sourceData).toBuffer(function(err, resultData) {
     if (err) throw err;
     filePath = path.join(filePath, name);
     const writerStream = fs.createWriteStream(filePath);
     // 標(biāo)記文件末尾
     writerStream.write(resultData,'binary');
     writerStream.end();
   
     // 處理流事件 --> data, end, and error
     writerStream.on('finish', function() {
      failsList.push(null);
      record(name, true, failsList.length, fullLen);
      if (failsList.length === fullLen) {
        finishcb(failsList, filePath);
      }
     });

     writerStream.on('error', function(err){
      failsList.push(name);
      record(name, false, failsList.length, fullLen);
      if (failsList.length === fullLen) {
        finishcb(failsList, filePath);
      }
     });
    });
  });
}

// 生成日志
const record = (name, success = true, currNum, fullLen)=> {
  const status = success ? '完成' : '失敗';
  console.log(`${name} 壓縮${status}。 ${currNum}/${fullLen}`);
}

/**
 * 完成調(diào)用的回調(diào)
 * @param {*} failList 存儲(chǔ)壓縮失敗圖片名的數(shù)組
 * @param {*} filePath 用來存放的新地址
 */
const finishcb = (failList, filePath)=> {
  const rest = 500 - tinify.compressionCount;
  console.log('本月剩余次數(shù)：' + rest);
  const fails = failList.filter(item=> item !== null);
  if (fails.length > 0) {
    // 存在壓縮失敗的項(xiàng)目(展示失敗的項(xiàng)目名)，詢問是否把壓縮失敗的繼續(xù)壓縮 y/n
    // 選擇否之后，詢問是否生成錯(cuò)誤日志
    inquirer.prompt({
      type: 'confirm',
      name: 'compressAgain',
      message: '存在壓縮失敗的圖片，是否將失敗的圖片繼續(xù)壓縮？',
      default: true
    }).then(res=> {
      if (res) {
        compressArray(failList, filePath);
      } else {
        // 詢問是否生成錯(cuò)誤日志
      }
    })
  } else {
    // 壓縮完成
    console.log('======圖片已全部壓縮完成======');
  }
}

module.exports = {
  compress
}

libs/subCommand.js

const inquirer = require('inquirer');
const {compress} = require('./compress.js');
const {checkApiKey, getKeys, addKeyToFile, list} = require('./util.js');

module.exports.compress = compress;
module.exports.init = ()=> {
  inquirer.prompt({
    type: 'input',
    name: 'apiKey',
    message: '請輸入api-key：',
    validate: (apiKey)=> {
      // console.log('\n正在檢測，請稍候...');
      process.stdout.write('\n正在檢測，請稍候...');
      return new Promise(async (resolve)=> {
        const res = await checkApiKey(apiKey);
        resolve(res);
      });
    }
  }).then(async res=> {
    await addKeyToFile(res.apiKey);
    console.log('apikey 已完成初始化，壓縮工具可以使用了');
  })
}

module.exports.addKey = async key=> {
  await checkApiKey(key);
  const keys = await getKeys();
  if (keys.includes(key)) {
    console.log('該api-key已存在文件內(nèi)');
    return;
  }
  const content = keys.length === 0 ? '' : keys.join(' ') + ' ';
  await addKeyToFile(key, content);
  list();
}

module.exports.deleteKey = async key=> {
  const keys = await getKeys();
  const index = keys.indexOf(key);
  if (index < 0) {
    console.log('該api-key不存在');
    return;
  }
  keys.splice(index, 1);
  console.log(keys);
  const content = keys.length === 0 ? '' : keys.join(' ');
  await addKeyToFile('', content);
  list();
}

module.exports.emptyKey = async key=> {
  inquirer.prompt({
    type: 'confirm',
    name: 'emptyConfirm',
    message: '確認(rèn)清空所有已存儲(chǔ)的api-key？',
    default: true
  }).then(res=> {
    if (res.emptyConfirm) {
      addKeyToFile('');
    } else {
      console.log('已取消');
    }
  })
}

module.exports.list = list;

libs/util.js

const fs = require('fs');
const path = require('path');
const tinify = require('tinify');
const KEY_FILE_PATH = path.join(__dirname, './data/key');

// 睡眠
const sleep = (ms)=> {
  return new Promise(function(resolve) {
    setTimeout(()=> {
      resolve(true);
    }, ms);
  });
}
// 判定apikey是否有效
const checkApiKey = async apiKey=> {
  return new Promise(async resolve=> {
    let res = true;
    res = /^\w{32}$/.test(apiKey);
    if (res === false) {
      console.log('api-key格式不對');
      resolve(res);
      return;
    }
    res = await checkKeyValidate(apiKey);
    resolve(res);
  })
}
// 檢查api-key是否存在
const checkKeyValidate = apiKey=> {
  return new Promise(async (resolve)=> {
    tinify.key = apiKey;
    tinify.validate(function(err) {
      if (err) {
        console.log('該api-key不是有效值');
        resolve(false);
      }
    });
    let count = 500;
    Object.defineProperty(tinify, 'compressionCount', {
      get: ()=> {
        return count;
      },
      set: newValue => {
        count = newValue;
        resolve(true);
      },
      enumerable : true,
      configurable : true
    });
  });
};

// 獲取文件內(nèi)的key，以數(shù)組的形式返回
const getKeys = ()=> {
  const keys = fs.readFileSync(KEY_FILE_PATH, 'utf-8').split(' ');
  return keys[0] === '' ? [] : keys;
}

// 把a(bǔ)pi-key寫入到文件里
const addKeyToFile = (apiKey, content = '')=> {
  return new Promise(async resolve=> {
    const writerStream = fs.createWriteStream(KEY_FILE_PATH);
    // 使用 utf8 編碼寫入數(shù)據(jù)
    writerStream.write(content + apiKey,'UTF8');

    // 標(biāo)記文件末尾
    writerStream.end();

    // 處理流事件 --> data, end, and error
    writerStream.on('finish', function() {
      console.log('=====已更新=====');
      resolve(true);
    });

    writerStream.on('error', function(err){
      console.log(err.stack);
      console.log('寫入失敗。');
      resolve(false);
    });
  })
}

// 顯示文件內(nèi)的api-key
const list = ()=> {
  const keys = getKeys();
  if (keys.length === 0) {
    console.log('沒有存儲(chǔ)api-key');
  } else {
    keys.forEach((key)=> {
      console.log(key);
    });
  }
};
module.exports = {
  sleep,
  checkApiKey,
  getKeys,
  addKeyToFile,
  list
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: