在 NPM 发布自己造的轮子

忘是亡心i 2022-02-01 10:21 307阅读 0赞

1、前言

自从Node.js出现，它的好基友npm（node package manager）也是我们日常开发中必不可少的东西。npm让js实现了模块化，使得复用其他人写好的模块（搬砖）变得更加方便，也让我们可以分享一些自己的作品给大家使用（造轮子），今天这里我就给大家分享一个用命令行压缩图片的工具，它的用法大致是这样的：

// 全局安装后，在图片目录下，运行这行
    $ tinyhere

这样就把文件夹内的图片进行压缩。这里压缩采用的是tinypng（https://tinypng.com/）提供的接口，压缩率大致上是50%，基本可以压一半的大小。以前在写项目的时候，测试验收完成后总是要自己手动去压一次图片，后来想把这个枯燥重复的事自动化去完成（懒），但是公司脚手架又没有集成这个东西，就想自己写一个轮子做出来用用就好了。它的名字叫做 `tinyhere`，大家可以去安装使用试一下：

$ npm i tinyhere -g

2、npm简介

如果要写一个模块发布到npm，那么首先要了解一下npm的用法。

给这个模块建一个文件夹，然后在目录内运行 `npm init`来初始化它的package.json，就是这个包的描述：

// 个人比较喜欢后面带--yes，它会生成一个带默认参数的package.json
    $ npm init (--yes)

**package.json详情：**

{
      "name": "pkgname", // 包名，默认文件夹的名字
      "version": "1.0.0",
      "description": "my package",
      "main": "index.js", // 如果只是用来全局安装的话，可以不写
      "bin": "cli", // 如果是命令行使用的话，必须要这个，名字就是命令名
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1" // npm run test对应的test
      },
      "keywords": ['cli', 'images', 'compress'],
      "author": "croc-wend",
      "license": "MIT",
      ...
    }

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

初始化完成之后，你就可以着手写这个包了，当你觉得你写好了之后，就可以发布到npm上面：

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

这时，你在npm上面搜你的包名，你写在package.json的信息都会被解析，然后你的包的页面介绍内容就是你的README.md。

3、写这个包

包初始化好了之后，我们就可以开始写这个包了。

对于这个压缩工具来说，要用到的素材只有两个，tinypng接口要用到的api-key，需要压缩的图片，所以我对这两个素材需要用到的一些操作进行了以下分析：

![1552987998624858.jpg][]

我的初衷是想把这个命令写的尽量简单，让我可以联想到压缩图片=简单，所以我待定了整个包只有一个单词就能跑，是这样：

$ tinyhere

其他的操作都放在子命令和可选项上。

然后开始划分项目结构：

![1552987999654016.png][]

大致上是这样，把全局命令执行的 `tinyhere` 放在bin目录下，然后subCommand负责提供操作函数，然后把可复用的函数（比如读写操作）抽离出来放在util上，比较复杂的功能单独抽离成一个文件，比如compress，然后导出一个函数给subCommand。至于存放用户的api-key，就存放在data下面的key里。

tinyhere的执行文件就负责解析用户的输入，然后执行subCommand给出的对应函数。

4、过程解析

压缩图片的这个包的过程是这样的：

1、解析当前目录内的所有图片文件，这里应该根据二进制流及文件头获取文件类型mime-type，然后读取文件二进制的头信息，获取其真实的文件类型，来判断它是否真的是图片文件，而不是那些仅仅是后缀名改成.png的假货。

2、 如果用户有要求把压缩的图片存放到指定目录，那就需要生成一个文件夹来存放它们。那么，首先要判断这个路径是否合法，然后再去生成这个目录。

3、判断用户的api-key的剩余次数是否足够这次的图片压缩，如果这个key不够，就换到下一个key，知道遍历文件内所有的key找到有可用的key为止。

4、图片和key都有了，这时可以进行压缩了。用一个数组把压缩失败的存起来，然后每次压缩完成都输出提示，在所有图片都处理完成后，如果存在压缩失败的，就询问是否把压缩失败的图继续压缩。

5、这样，一次压缩就处理完成了。压缩过的图片会覆盖原有的图片，或者是存放到指定的路径里。

ps： `$ tinyhere deep` >>> 把目录内的所有图片都进行压缩（含子目录）。这个命令和上述的主命令的流程有点不同，目前有点头绪，还没有开发完成，考虑到文件系统是树形结构，我目前的想法是通过深度遍历，把存在图片的文件夹当作一个单位，然后递归执行压缩。

**其他：**

这里吐槽一下tinypng 的接口写的真的烂。。在查询key的合法性的 validate 函数只接受报错的回调，但是成功却没有任何动作。我真是服了，之前是做延时来判断用户的key的合法性，最后实在是受不了这个bug一样的写法了，决定用 `Object.defineProperty` 来监听它的使用次数的变化。如果它的setter被调用则说明它是一个合法的key了。

5、小结

在这里，我想跟大家说，如果你做了一个你觉得很酷的东西，也想给更多的人去使用，来让它变得更好，选择发布在NPM上面就是一个非常好的途径，看了上面的内容你会发现分享其实真的不难，你也有机会让世界看到属于你的风采！

如果大家觉得我有哪里写错了，写得不好，有其它什么建议（夸奖），非常欢迎大家补充。希望能让大家交流意见，相互学习，一起进步！ 我是一名 19 的应届新人，以上就是今天的分享，新手上路中，后续不定期周更（或者是月更哈哈），我会努力让自己变得更优秀、写出更好的文章，文章中有不对之处，烦请各位大神斧正。如果你觉得这篇文章对你有所帮助，请记得点赞或者品论留言哦～。

6、写在最后

欢迎大家提issue或者建议！地址在这：

*  https://github.com/Croc-ye/tinyhere
 *  https://www.npmjs.com/package/tinyhere

最后贴上部分代码，内容过长，可以跳过哦

**bin/tinyhere**

1.  `#!/usr/bin/env node`
2.   
3.  `const commander = require('commander');`
4.  `const {init, addKey, deleteKey, emptyKey, list, compress} = require('../libs/subCommand.js');`
5.  `const {getKeys} = require('../libs/util.js');`
6.   
7.  `// 主命令`
8.  `commander`
9.  `.version(require('../package').version, '-v, --version')`
10. `.usage('[options]')`
11. `.option('-p, --path <newPath>', '压缩后的图片存放到指定路径（使用相对路径）')`
12. `.option('-a, --add <key>', '添加api-key')`
13. `.option('--delete <key>', '删除指定api-key')`
14. `.option('-l, --list', '显示已储存的api-key')`
15. `.option('--empty', '清空已储存的api-key')`
16.  
17. `// 子命令`
18. `commander`
19. `.command('deep')`
20. `.description('把该目录内的所有图片（含子目录）的图片都进行压缩')`
21. `.action(()=> {`
22. `   // deepCompress();`
23. `   console.log('尚未完成，敬请期待');`
24. `})`
25.  
26. `commander.parse(process.argv);`
27.  
28.  
29. `// 选择入口`
30. `if (commander.path) {`
31. `   // 把图片存放到其他路径`
32. `   compress(commander.path);`
33. `} else if (commander.add) {`
34. `   // 添加api-key`
35. `   addKey(commander.add);`
36. `} else if (commander.delete) {`
37. `   // 删除api-key`
38. `   deleteKey(commander.delete);`
39. `} else if (commander.list) {`
40. `   // 显示api-key`
41. `   list();`
42. `} else if (commander.empty) {`
43. `   // 清空api-key`
44. `   emptyKey();`
45. `} else {`
46. `   // 主命令`
47. `   if (typeof commander.args[0] === 'object') {`
48. `       // 子命令`
49. `       return;`
50. `   }`
51. `   if (commander.args.length !== 0) {`
52. `       console.log('未知命令');`
53. `       return;`
54. `   }`
55. `   if (getKeys().length === 0) {`
56. `       console.log('请初始化你的api-key')`
57. `       init();`
58. `   } else {`
59. `       compress();`
60. `   }`
61. `};`

**libs/compress.js**

1.  `const tinify = require('tinify');`
2.  `const fs = require("fs");`
3.  `const path = require('path');`
4.  `const imageinfo = require('imageinfo');`
5.  `const inquirer = require('inquirer');`
6.  `const {checkApiKey, getKeys} = require('./util');`
7.   
8.  `// 对当前目录内的图片进行压缩`
9.  `const compress = (newPath = '')=> {`
10. `   const imageList = readDir();`
11. `   if (imageList.length === 0) {`
12. `       console.log('当前目录内无可用于压缩的图片');`
13. `       return;`
14. `   }`
15. `   newPath = path.join(process.cwd(), newPath);`
16. `   mkDir(newPath);`
17.  
18. `   findValidateKey(imageList.length);`
19. `   console.log('===========开始压缩=========');`
20. `   if (newPath !== process.cwd()) {`
21. `       console.log('压缩到：  ' + newPath.replace(/\./g, ''));`
22. `   }`
23. `   compressArray(imageList, newPath);`
24. `};`
25.  
26. `// 生成目录路径`
27. `const mkDir = (filePath)=> {`
28. `   if (filePath && dirExists(filePath) === false) {`
29. `       fs.mkdirSync(filePath);`
30. `   }`
31. `}`
32.  
33. `// 判断目录是否存在`
34. `const dirExists = (filePath)=> {`
35. `   let res = false;`
36. `   try {`
37. `       res = fs.existsSync(filePath);`
38. `   } catch (error) {`
39. `       console.log('非法路径');`
40. `       process.exit();`
41. `   }`
42. `   return res;`
43. `};`
44.  
45.  
46. `/**`
47. `* 检查api-key剩余次数是否大于500`
48. `* @param {*} count 本次需要压缩的图片数目`
49. `*/`
50. `const checkCompressionCount = (count = 0)=> {`
51. `   return (500 - tinify.compressionCount - count) >> 0;`
52. `}`
53.  
54. `/**`
55. `* 找到可用的api-key`
56. `* @param {*} imageLength 本次需要压缩的图片数目`
57. `*/`
58. `const findValidateKey = async imageLength=> { // bug高发处`
59. `   const keys = getKeys();`
60. `   for (let i = 0; i < keys.length; i++) {`
61. `       await checkApiKey(keys[i]);`
62. `       res = checkCompressionCount(imageLength);`
63. `       if (res) return;`
64. `   }`
65. `   console.log('已存储的所有api-key都超出了本月500张限制，如果要继续使用请添加新的api-key');`
66. `   process.exit();`
67. `}`
68.  
69. `// 获取当前目录的所有png/jpg文件`
70. `const readDir = ()=> {`
71. `   const filePath = process.cwd()`
72. `   const arr = fs.readdirSync(filePath).filter(item=> {`
73. `       // 这里应该根据二进制流及文件头获取文件类型mime-type，然后读取文件二进制的头信息，获取其真实的文件类型，对与通过后缀名获得的文件类型进行比较。`
74. `       if (/(\.png|\.jpg|\.jpeg)$/.test(item)) { // 求不要出现奇奇怪怪的文件名。。`
75. `           const fileInfo = fs.readFileSync(item);`
76. `           const info = imageinfo(fileInfo);`
77. `           return /png|jpg|jpeg/.test(info.mimeType);`
78. `       }`
79. `       return false;`
80. `   });`
81. `   return arr;`
82. `};`
83.  
84. `/**`
85. `* 对数组内的图片名进行压缩`
86. `* @param {*} imageList 存放图片名的数组`
87. `* @param {*} newPath 压缩后的图片的存放地址`
88. `*/`
89. `const compressArray = (imageList, newPath)=> {`
90. `   const failList = [];`
91. `   imageList.forEach(item=> {`
92. `       compressImg(item, imageList.length, failList, newPath);`
93. `   });`
94. `}`
95.  
96. `/**`
97. `* 压缩给定名称的图片`
98. `* @param {*} name 文件名`
99. `* @param {*} fullLen 全部文件数量`
100. `* @param {*} failsList 压缩失败的数组`
101. `* @param {*} filePath 用来存放的新地址`
102. `*/`
103. `const compressImg = (name, fullLen, failsList, filePath)=> {`
104. `   fs.readFile(name, function(err, sourceData) {`
105. `       if (err) throw err;`
106. `       tinify.fromBuffer(sourceData).toBuffer(function(err, resultData) {`
107. `         if (err) throw err;`
108. `         filePath = path.join(filePath, name);`
109. `         const writerStream = fs.createWriteStream(filePath);`
110. `         // 标记文件末尾`
111. `         writerStream.write(resultData,'binary');`
112. `         writerStream.end();`
113.  
114. `         // 处理流事件 --> data, end, and error`
115. `         writerStream.on('finish', function() {`
116. `           failsList.push(null);`
117. `           record(name, true, failsList.length, fullLen);`
118. `           if (failsList.length === fullLen) {`
119. `               finishcb(failsList, filePath);`
120. `           }`
121. `         });`
122.  
123. `         writerStream.on('error', function(err){`
124. `           failsList.push(name);`
125. `           record(name, false, failsList.length, fullLen);`
126. `           if (failsList.length === fullLen) {`
127. `               finishcb(failsList, filePath);`
128. `           }`
129. `         });`
130. `       });`
131. `   });`
132. `}`
133.  
134. `// 生成日志`
135. `const record = (name, success = true, currNum, fullLen)=> {`
136. `   const status = success ? '完成' : '失败';`
137. ``   console.log(`${name} 压缩${status}。 ${currNum}/${fullLen}`);``
138. `}`
139.  
140. `/**`
141. `* 完成调用的回调`
142. `* @param {*} failList 存储压缩失败图片名的数组`
143. `* @param {*} filePath 用来存放的新地址`
144. `*/`
145. `const finishcb = (failList, filePath)=> {`
146. `   const rest = 500 - tinify.compressionCount;`
147. `   console.log('本月剩余次数：' + rest);`
148. `   const fails = failList.filter(item=> item !== null);`
149. `   if (fails.length > 0) {`
150. `       // 存在压缩失败的项目(展示失败的项目名)，询问是否把压缩失败的继续压缩 y/n`
151. `       // 选择否之后，询问是否生成错误日志`
152. `       inquirer.prompt({`
153. `           type: 'confirm',`
154. `           name: 'compressAgain',`
155. `           message: '存在压缩失败的图片，是否将失败的图片继续压缩？',`
156. `           default: true`
157. `       }).then(res=> {`
158. `           if (res) {`
159. `               compressArray(failList, filePath);`
160. `           } else {`
161. `              // 询问是否生成错误日志`
162. `           }`
163. `       })`
164. `   } else {`
165. `       // 压缩完成`
166. `       console.log('======图片已全部压缩完成======');`
167. `   }`
168. `}`
169.  
170. `module.exports = {`
171. `   compress`
172. `}`

**libs/subCommand.js**

1.  `const inquirer = require('inquirer');`
2.  `const {compress} = require('./compress.js');`
3.  `const {checkApiKey, getKeys, addKeyToFile, list} = require('./util.js');`
4.   
5.  `module.exports.compress = compress;`
6.  `module.exports.init = ()=> {`
7.  `   inquirer.prompt({`
8.  `       type: 'input',`
9.  `       name: 'apiKey',`
10. `       message: '请输入api-key：',`
11. `       validate: (apiKey)=> {`
12. `           // console.log('\n正在检测，请稍候...');`
13. `           process.stdout.write('\n正在检测，请稍候...');`
14. `           return new Promise(async (resolve)=> {`
15. `               const res = await checkApiKey(apiKey);`
16. `               resolve(res);`
17. `           });`
18. `       }`
19. `   }).then(async res=> {`
20. `       await addKeyToFile(res.apiKey);`
21. `       console.log('apikey 已完成初始化，压缩工具可以使用了');`
22. `   })`
23. `}`
24.  
25. `module.exports.addKey = async key=> {`
26. `   await checkApiKey(key);`
27. `   const keys = await getKeys();`
28. `   if (keys.includes(key)) {`
29. `       console.log('该api-key已存在文件内');`
30. `       return;`
31. `   }`
32. `   const content = keys.length === 0 ? '' : keys.join(' ') + ' ';`
33. `   await addKeyToFile(key, content);`
34. `   list();`
35. `}`
36.  
37. `module.exports.deleteKey = async key=> {`
38. `   const keys = await getKeys();`
39. `   const index = keys.indexOf(key);`
40. `   if (index < 0) {`
41. `       console.log('该api-key不存在');`
42. `       return;`
43. `   }`
44. `   keys.splice(index, 1);`
45. `   console.log(keys);`
46. `   const content = keys.length === 0 ? '' : keys.join(' ');`
47. `   await addKeyToFile('', content);`
48. `   list();`
49. `}`
50.  
51. `module.exports.emptyKey = async key=> {`
52. `   inquirer.prompt({`
53. `       type: 'confirm',`
54. `       name: 'emptyConfirm',`
55. `       message: '确认清空所有已存储的api-key？',`
56. `       default: true`
57. `   }).then(res=> {`
58. `       if (res.emptyConfirm) {`
59. `           addKeyToFile('');`
60. `       } else {`
61. `           console.log('已取消');`
62. `       }`
63. `   })`
64. `}`
65.  
66. `module.exports.list = list;`

**libs/util.js**

1.  `const fs = require('fs');`
2.  `const path = require('path');`
3.  `const tinify = require('tinify');`
4.  `const KEY_FILE_PATH = path.join(__dirname, './data/key');`
5.   
6.  `// 睡眠`
7.  `const sleep = (ms)=> {`
8.  `   return new Promise(function(resolve) {`
9.  `       setTimeout(()=> {`
10. `           resolve(true);`
11. `       }, ms);`
12. `   });`
13. `}`
14. `// 判定apikey是否有效`
15. `const checkApiKey = async apiKey=> {`
16. `   return new Promise(async resolve=> {`
17. `       let res = true;`
18. `       res = /^\w{32}$/.test(apiKey);`
19. `       if (res === false) {`
20. `           console.log('api-key格式不对');`
21. `           resolve(res);`
22. `           return;`
23. `       }`
24. `       res = await checkKeyValidate(apiKey);`
25. `       resolve(res);`
26. `   })`
27. `}`
28. `// 检查api-key是否存在`
29. `const checkKeyValidate = apiKey=> {`
30. `   return new Promise(async (resolve)=> {`
31. `       tinify.key = apiKey;`
32. `       tinify.validate(function(err) {`
33. `           if (err) {`
34. `               console.log('该api-key不是有效值');`
35. `               resolve(false);`
36. `           }`
37. `       });`
38. `       let count = 500;`
39. `       Object.defineProperty(tinify, 'compressionCount', {`
40. `           get: ()=> {`
41. `               return count;`
42. `           },`
43. `           set: newValue => {`
44. `               count = newValue;`
45. `               resolve(true);`
46. `           },`
47. `           enumerable : true,`
48. `           configurable : true`
49. `       });`
50. `   });`
51. `};`
52.  
53. `// 获取文件内的key，以数组的形式返回`
54. `const getKeys = ()=> {`
55. `   const keys =  fs.readFileSync(KEY_FILE_PATH, 'utf-8').split(' ');`
56. `   return keys[0] === '' ? [] : keys;`
57. `}`
58.  
59. `// 把api-key写入到文件里`
60. `const addKeyToFile = (apiKey, content = '')=> {`
61. `   return new Promise(async resolve=> {`
62. `       const writerStream = fs.createWriteStream(KEY_FILE_PATH);`
63. `       // 使用 utf8 编码写入数据`
64. `       writerStream.write(content + apiKey,'UTF8');`
65.  
66. `       // 标记文件末尾`
67. `       writerStream.end();`
68.  
69. `       // 处理流事件 --> data, end, and error`
70. `       writerStream.on('finish', function() {`
71. `           console.log('=====已更新=====');`
72. `           resolve(true);`
73. `       });`
74.  
75. `       writerStream.on('error', function(err){`
76. `           console.log(err.stack);`
77. `           console.log('写入失败。');`
78. `           resolve(false);`
79. `       });`
80. `   })`
81. `}`
82.  
83. `// 显示文件内的api-key`
84. `const list = ()=> {`
85. `   const keys = getKeys();`
86. `   if (keys.length === 0) {`
87. `       console.log('没有存储api-key');`
88. `   } else {`
89. `       keys.forEach((key)=> {`
90. `           console.log(key);`
91. `       });`
92. `   }`
93. `};`
94. `module.exports = {`
95. `   sleep,`
96. `   checkApiKey,`
97. `   getKeys,`
98. `   addKeyToFile,`
99. `   list`
100. `}`

[1552987998624858.jpg]: https://www.itcodemonkey.com/data/upload/portal/20190319/1552987998624858.jpg
[1552987999654016.png]: https://www.itcodemonkey.com/data/upload/portal/20190319/1552987999654016.png