卷他个小工具！efficient-tools 参上！

酱豆腐精
197 阅读11分钟

前言

相信小伙伴儿们在日常开发工作中，都有属于自己的工作流，而支撑这些工作流的，定然少不了形形色色的开发工具的身影。

这些工具的价值旨在提升小伙伴儿们的人效，可随着工具种类的日益增加，在日常使用的过程中难免会有些跳跃。尤其是在编码过程中，工具的切换可能会打断我们的思路（请听我狡辩......） 因此，我便萌生了开发一个工具集的念头，efficient-tools 应运而生。

截止目前，efficient-tools 中 (也就) 已经集成了三个小工具，下面我来依次介绍下~

功能介绍

ET-Link

是个啥

这个玩楞的作用是用来保存日常常用的一些链接地址，有点儿类似于浏览器收藏夹的功能。

做这个玩楞是因为之前每次想要查个啥都需要经历：打开浏览器 -> 新开标签页 -> 输入页面地址（有时候不记得还得去百度搜或者收藏夹里找） 这几个步骤，多少有点繁琐（主要因为我懒 Orz...）。

但是用上这个工具，那就不一样了。只需要在控制台输入

etl -o/--open <url name>

就可以直接打开页面了，不用又是开浏览器，又是开标签这那的，岂不是美滋儿滋儿~

咋用

这玩楞用起来其实也不复杂。

第一步：你倒是先收藏啊

试想一下，平常我们在使用浏览器收藏夹的时候，是不是得先收藏，然后下次再想打开的时候才能在收藏夹里头找到？所以，用它的第一步也是先收藏你日常用的比较多的地址。

收藏地址主要有两种方式：

逐个添加

你可以通过以下命令逐个添加你日常常用的地址：

etl -a/--add <address> [key]

其中，address 是你想要收藏的链接地址，key 是这个地址对应的名称，之后打开地址则是通过 key 来查找这个地址并进行跳转的。当然，如果你觉得设置 key 比较麻烦的话（咱就是说你也懒）也可以不设置，收藏时会按照 / 将地址进行分割，并将末位作为该地址的 key（如果地址后缀花里胡哨的话，还是建议你勤快点儿呢亲~）。

一把梭

如果常用的地址太多了，逐个添加确实有点麻烦，这个时候，你可以通过如下命令一次性导入多个地址：

etl -i/--init <filepath>

其中，filepath 是存放地址信息的文件路径。

这个工具本质上其实就是维护了一个链接地址的键值对 json, 因此该文件需要是个 .json 文件，举个🌰：

{
	"npm": "https://www.npmjs.com/"
}

第二步：You jump，I （看着你）jump

收藏完了之后，就可以进行跳转了。跳转命令其实就是一开始介绍的内个：

etl -o/--open <url name>

其他功能

使用这个工具主要就是以上两个步骤，当然，这个工具中也提供了一些辅助功能。

-r/--remove

如果过了一段时间之后，你发现有些地址你用不到了，或者不常用了，那么你可以通过此命令删掉它（没有利用价值的地址不配存在我的列表里👻：

etl -r/--remove <key>

TODO: 后续我会统计 使用次数 ，以便更直观的看出来哪些是不常用的地址。

-l/--list

如果你想看看自己已经存了哪些（花里胡哨）有用的地址，可以通过该命令将它们罗列出来：

etl -l/--list

image.png

-c/--check

有些时候，我们可能会需要在移动设备上浏览相关链接，此时可以通过该命令生成地址对应的二维码，而后扫码访问：

etl -c/--check <key>

-e/--empty

暴力清空所有已经存储的地址（阅后即焚行为）：

etl -e/--empty

-d/--derive

该命令与 -i/--init 相对，它可以将已存储的命令导出到指定文件下（如果你有备份需求的话）：

etl -d/--derive

执行命令后，你可以设置自定义的文件名称，默认是 addresses.json，确认后，文件会被导出到 执行该命令的当前目录下。

image.png

-m/--modify

如果手抖存错了地址或者写错了名称，可以通过它来对其进行编辑修改。

执行命令后，会让你选择想要修改的地址名称，并设置想要覆盖名称还是地址，随后输入覆盖的内容即可：

image.png

-w/--where

有的时候你可能会忘记保存地址的 json 文件在哪儿，通过执行该命令，你可以得到该文件的完整路径：

etl -w/--where

--directory

收藏的地址会默认保存到 /Users/<username>/etl.json 文件中，如果你觉得不妥，可以通过该命令设置你想要存放的地址：

etl --directory

至此，ET-Link 的功能介绍完毕~（容我喝口水... 吨吨吨吨吨吨吨吨~~）

image.png

ET-Dictionary

是个啥

字面意思，这玩楞就是个词典。相信大多数小伙伴儿都用过 Chrome 上的 沙拉划词 (戳不开的请科学上网)，哪里不会划拉哪里~ So easy~

那除了查生词以外，这个玩楞的应用场景在哪儿呢？

还记得那句名言么：

开发中最麻烦的两件事：一件是缓存，另一件是取变量名。

当我们替变量想到一个不错的中文名儿，但是不知道它英文名儿该怎么称呼的时候（没错，我就是那个英语战五渣），就可以用到它。

咋用

第一步：先注册

目前这个工具使用的是 有道云 提供的 API，因此在使用之前，需要先去 这里 注册下~（有道打钱！！）

注册完成后，可以在控制台中看到对应的 应用ID(appId) 以及 应用密钥(secretKey)

image.png

之后，通过 etd -c/--config 配置下即可。

第二步：后使用

使用它也很简单，只要使用 etd -t/--translate 命令即可:

etd -t/--translate

执行命令后，键入你想要翻译的内容（可以是句子）：

image.png

其他功能

-l/--language

通过该命令可以罗列出目前支持翻译的所有语种：

image.png

（太多了，截一部分看看得了，反正除了中日英韩，其他基本用不到...）

-s/--set

默认情况下，翻译是从 中文 翻译成 英文，如果你想翻译其他语种，可以通过该命令进行设置：

etd -s/--set

-r/--rule

如果你忘了当前的翻译规则（把哪种语言翻译成哪种语言），可以通过该命令将规则打印出来:

image.png

That's all.

最后再看下 ET-Pictures 这个玩楞。

ET-Pictures

是个啥

这个工具的主要作用是用来做图片压缩的。

当我们在对页面性能进行优化时，图片的大小也是其中的一项重要优化项。通过这个工具，我们可以对指定目录下的图片进行压缩。

咋用

第一步：还是先注册

目前这个工具使用的是 Tiny png 所提供的 API, 大伙儿使用前得去 这儿 申请自己的 API KEY：

image.png

之后通过 etp -s/--set 设置下即可。 目前支持的图片格式主要有 WebP, JPEG(JPG), PNG。

image.png

第二步：后使用

你可以通过 -c/--compress 命令进行压缩。该命令支持两种压缩模式：压缩在线图片 以及 压缩本地图片：

image.png

PS: 免费版每个月有500次的压缩上限，不过日常使用应该是足够的（有钱人请忽略这条提醒...）

压缩在线图片

当选择压缩在线图片时，你需要指定:

  1. 输出目录（默认为当前执行命令所在目录的上一级目录）
  2. 所要压缩的图片在线地址
  3. 输出图片的名称（默认为 new Date().getTime()）

image.png

压缩本地图片

当选择压缩本地图片时，你需要指定:

  1. 输出目录（默认为当前执行命令所在目录的上一级目录）
  2. 压缩模式。本地图片压缩有两种模式：shallow 以及 deep。默认是 shallow 模式，即只压缩指定目录下的图片。而 deep 模式则会深度遍历子目录（子目录的子目录，子目录的子目录的子目录，子目录的子目录的子目录的子目录....）下的所有图片进行压缩
  3. 需要压缩的图片所在路径，默认为当前路径
  4. 输出图片的文件夹名称（默认为 new Date().getTime()）

image.png

遇到的问题

问题表现

在实现完上述功能之后，我遇到了一个问题：由于配置保存在包内的 .env 文件中，在每次更新包时，原先保存在本地的配置会被清空掉。

解决方案

为此我提供了 ET-Config 工具:

Usage: etc [options]

Options:
  -v, --version  output the version number
  -i, --init     init ET configuration
  -e, --export   export ET configuration
  -h, --help     display help for command

这样用户便可以在更新前通过 etc -e 命令将本地的配置先行导出，在更新完成后，再通过 etc -i 的方式还原配置。

其中，etc -i 提供了两种方式，分别是 通过本地配置文件还原 以及 选择相应配置进行还原：

image.png

通过本地配置文件还原 其实就是选择刚才备份的文件直接进行还原，而另一种方式可以让用户在一开始就可以选择性的对有道 API 以及 TinyPng 的 API 进行配置，无需通过 etd -c 以及 etp -c 两种命令进行设置， 省时省力：

image.png

思考 && TODO

相较于备份再还原的方式，似乎让用户指定配置文件路径更为方便，这样在下次包更新时便不用备份再还原。因此：

TODO: 后续我会支持自定义备份路径的方式。

用到的一些工具包

commander

上文中所提到的这些命令行工具，在使用时可以通过 -h/--help 查看各工具所支持的命令：

image.png

也可以通过 -v/--version 来查看当前版本：

image.png

包括上述介绍中所提到的所有命令，均是通过 commander 提供出来的，举个🌰：

const { Command } = require('commander')
const program = new Command()
// 获取版本信息
program.version(version, '-v, --version')
// 设置命令以及对应描述
program
  .option('-i, --init', 'init ET configuration')
  .option('-e, --export', 'export ET configuration')
// 解析控制台输入参数
program.parse(process.argv)
// 读取对应参数
const { init, export: _export } = program.opts()

诚然，这些功能我们也可以手动实现，但如此便免不了诸多繁琐。既然有造好的轮子，那何不拿来用一用呢？🤪

zx

针对不同类别的控制台打印信息，其实可以设置相应的颜色，这样看起来更加直观，也更加美观。zx 是 Google 开发的一款工具，其中也封装了 chalk ，只要引入了 zx 便可直接使用。通过它可以为控制台输出信息“上色”。举个🌰：

console.log(chalk.red(`Create objet defeat! The error message is: ${error}`))
复制代码

更多的颜色跟使用方式，小伙伴们也可以去研究一下，让控制台输出也多姿多彩起来~

PS: 使用时记得在文件开头标注 #!/usr/bin/env zx 哟~

inquirer

在上文的介绍中，小伙伴们可能留意到了 交互式命令行 的使用痕迹。该能力就是 inquirer 所提供的。包括我们在日常使用第三方脚手架工具时也时常能看到它的身影。它的存在让原本枯燥的命令行显得更加生动。日后小伙伴们在开发自己的命令行工具时，不妨来使用下它吧~

dotenv

这个玩楞的作用是可以将你本地 .env 文件中的配置整合到 process.env 中去，这样就不用每次通过读取文件的方式来获取相应的配置。上文中所提到的 ET-Dictionary 以及 ET-Pictures 工具就是通过它来读取本地配置的信息：

const dotenv = require('dotenv')

// dotenv configuration
module.exports.dotenvInit = () => {
  const dotenvPath = path.join(__dirname, '../../.env')
  dotenv.config({ path: dotenvPath })
}

结语

行文至此，efficient-tools 的功能已介绍完毕（广告就打完了）😝。

有兴趣的小伙伴可以 戳这里 下载安装试用（骗下载）。

觉得工具尚可的小伙伴儿欢迎 ⭐️~（骗star）。

在使用过程中，如果发现问题，或者有更好的想法，欢迎 issue 区留言！（骗创意）

avatar
文章
阅读
粉丝