如何开发一款前端工具

来源 | https://juejin.cn/post/6899446879487180808

作者 | 隐冬

基本上&＃xff0c;使用任何成熟的语言都可以开发 cli 工具&＃xff0c;作为一个前端小白&＃xff0c;还是 Javascript 比较顺手&＃xff0c;因此我们选用nodejs作为开发语言&＃xff0c;开发一款node-cli工具。

类似于脚手架工具&＃xff0c;Node工具会自动去询问你一些预设的问题&＃xff0c;然后将你回答的结果结合一些模板文件&＃xff0c;给你生成一个项目结构。

那接下来我们以一个小型的脚手架工具为例&＃xff0c;通过Nodejs完成一个Node工具&＃xff0c;再来去深入体会一下Node工具的工作过程。

那我们知道脚手架工具实际上就是一个node-cli应用&＃xff0c;那创建脚手架就是创建一个node-cli应用&＃xff0c;那这里我们具体来操作一下&＃xff0c;我们首先进入到命令行&＃xff0c;通过mkdir去创建一个工具目录。

mkdir samlpe-clicd sample-cli


在这个目录下面我们通过yarn init 方式去初始化一个package.json文件

yarn init


有了这个文件之后通过编辑器打开这个目录&＃xff0c;紧接着我们需要在package.json中添加一个bin字段&＃xff0c;用于去指定一下我们cli应用的入口文件, 我们这里叫cli.js

{ "name": "sample-cli", "bin": "cli.js", ...}


再然后我们添加这个cli.js文件&＃xff0c;跟以往我们在Node中书写的文件有所不同&＃xff0c;cli的入口文件必须要有一个特定的文件头, 也就是在这个文件顶部写上这样一句话 #! /usr/bin/env node 我们在这个文件中console.log一句话。

#! /usr/bin/env node
console.log(&＃39;cli working&＃39;)


如果说你的操作系统是linux或者mac系统你还还需要去修改这个文件的读写权限&＃xff0c;把他修改成755&＃xff0c;这样才可以作为一个cli的入口文件。

我们回到命令行&＃xff0c;我们通过yarn link 将这个模块映射到全局

yarn link


这时候我们就可以在命令行使用sample这样一个命令, 通过执行这个命令我们的console.log成功打印出来&＃xff0c;表示代码执行了。也就意味着我们这个cli基础就已经ok了。

sample-cli


接下来我们实现一下脚手架的具体业务&＃xff0c;也就是我们脚手架的工作过程。

首先我们需要通过命令行交互的的方式去询问用户的一些信息&＃xff0c;然后紧接着呢根据用户反馈回来的结果我们去生成文件&＃xff0c;

1. 通过命令行交互的方式询问用户信息

2. 根据用户反馈回来的结果生成文件

在Node当中去发起命令行交互询问我们使用inquirer这样一个模块&＃xff0c;那我们需要通过npm安装一下这个模块&＃xff0c;我这里使用yarn&＃xff0c;安装在依赖文件当中。

yarn add inquirer --dev


那有了这个模块过后就可以在代码中去载入, inquirer这个模块提供一个叫做prompt的方法用于发起一个命令行的询问。

他可以接收一个数组参数&＃xff0c;数组中每一个成员就是一个问题&＃xff0c;可以通过type指定问题输入方式&＃xff0c;然后name指定返回值的键&＃xff0c;message去指定屏幕上给用户的一个提示&＃xff0c;在promise的then里面拿到这个问题接收到用户的答案。

我们这里不着急往下写&＃xff0c;我们先通过console.log去打印一下。

const inquirer &＃61; require(&＃39;inquirer&＃39;);
inquirer.prompt([ { type: &＃39;input&＃39;, name: &＃39;name&＃39;, message: &＃39;Project name&＃39; }]).then(answer &＃61;> { console.log(answer);})


回到控制台&＃xff0c;我们命令行执行sample-cli, 此时就会提示我们需要输入项目的名称。

sample-cli


这样就可以看到问题和返回的结果。这也就证明inquirer确实可以帮我们发起命令行交互询问。

那有了inquirer之后接下来我们要考虑的就是动态的去生成我们的项目文件。

我们一般会根据模板去生成&＃xff0c;所以我们在项目的跟目录下新建一个templates目录&＃xff0c;在这个目录下我们去新建一些模板。

由于我们这里是讨论脚手架的工作过程&＃xff0c;所以我们也不去关心模板里面有什么&＃xff0c;我们就随便写点什么。我们可以通过 <%%>去替换询问过程中得到的答案。

index.html

我们还可以添加一些其他的模板文件&＃xff0c;比如style.css

style.css

body { margin: 0; background-color: red;}


回到cli.js文件, 这时候我们可以在得到问题答案的位置&＃xff0c;根据用户回答的问题去生成文件。不过在生成前我们一般会先将模板路径和目标目录确定下来。

模板的目录应该是项目当前目录的templates&＃xff0c;我们可以通过path获取。

const path &＃61; require(&＃39;path&＃39;);
// 工具当前目录const tmplDir &＃61; path.join(__dirname, &＃39;templates&＃39;);


输出的目标目录一般是我们命令行在哪个目录去执行就应该是哪个路径&＃xff0c;也就是cwd目录

const path &＃61; require(&＃39;path&＃39;);
// 工具当前目录const tmplDir &＃61; path.join(__dirname, &＃39;templates&＃39;);// 命令行所在目录const destDir &＃61; process.cwd();


明确这两个目录&＃xff0c;我们就可以通过fs模块去读取一下模板目录下一共有哪些文件。把这些文件全部输入到我们的目标目录&＃xff0c;我们通过fs的readDir方法&＃xff0c;这个方法会自动扫描目录下的所有文件

fs.readdir(tmplDir, (err, files) &＃61;> { if (err) { throw err; } files.forEach(file &＃61;> { console.log(file); // 得到每个文件的相对路径 })})


我们可以通过模板引擎去渲染路径对应的文件&＃xff0c;先去安装一款模板引擎&＃xff0c;这里我们使用ejs

yarn add ejs --dev


安装过后&＃xff0c;回到代码中引入这个模板引擎, 通过模板引擎提供的renderFile去渲染这个路径对应的文件。

第一个参数是文件的绝对路径&＃xff0c;第二个参数是模板引擎在工作的时候的数据上下文&＃xff0c;第三个参数是回调函数&＃xff0c;也就是我们在渲染成功过后的回调函数&＃xff0c;当然如果你在渲染过程中出现了意外那你可以通过throw err的方式把这个错误抛出去。

我们可以先把result通过打印的方式打印出来看一下。

const fs &＃61; require(&＃39;fs&＃39;);const path &＃61; require(&＃39;path&＃39;);const inquirer &＃61; require(&＃39;inquirer&＃39;);const ejs &＃61; require(&＃39;ejs&＃39;);
// 工具当前目录const tmplDir &＃61; path.join(__dirname, &＃39;templates&＃39;);// 命令行所在目录const destDir &＃61; process.cwd();
inquirer.prompt([ { type: &＃39;input&＃39;, name: &＃39;name&＃39;, message: &＃39;Project name&＃39; }]).then(answer &＃61;> { fs.readdir(tmplDir, (err, files) &＃61;> { if (err) { throw err; } files.forEach(file &＃61;> { ejs.renderFile(path.join(tmplDir, file), answer, (err, result) &＃61;> { if (err) { throw err; } console.log(result); }) }) })})


编辑完成之后我们运行一下脚手架工具。

sample-cli


此时打印出来的这个结果其实是已经经过模板引擎工作过后的结果&＃xff0c;我们只需要将这个结果通过文件写入的方式写入到目标目录就可以了&＃xff0c;那目标目录应该是通过path.join把我们destDir以及我们的file做一个拼接。内容就是我们这里的result。

files.forEach(file &＃61;> { ejs.renderFile(path.join(tmplDir, file), answer, (err, result) &＃61;> { if (err) { throw err; } fs.writeFileSync(path.join(destDir, file), result); })})


完成过后我们找到一个新的目录&＃xff0c;使用一下这个脚手架

sample-cli


我们输入项目名称过后&＃xff0c;就会发现他会自动把我们模板里面的文件自动生成到对应的目录里面&＃xff0c;至此我们就已经完成了一个非常简单&＃xff0c;非常小型的一个脚手架应用。

那我们也回顾了一下脚手架的工作过程&＃xff0c;其实脚手架的工作原理并不复杂&＃xff0c;但是他的意义却是很大的&＃xff0c;因为他确实在创建项目环节大大提高了我们的效率。

我们可以将自己的工具发布至npm上&＃xff0c;提供给更多的人使用。

至于发布npm也非常的简单&＃xff0c;首先我们需要注册npm账号&＃xff0c;有两种方式可以注册&＃xff0c;一种是登录npm官网https://www.npmjs.com/, 另一种是使用命令npm adduser。

npm adduser


会提示你输入用户名&＃xff0c;密码&＃xff0c;以及邮箱。

注册好后登录npm账号。

npm login


依次输入第二步中第一种方法注册的用户名、密码和邮箱。

登录成功后执行npm发布命令。

npm publish


注意&＃xff1a;如果报错&＃xff1a;&＃39;You do not have permission to publish "samlpe-cli". Are you logged in as the correct user?&＃39;

表示包samlpe-cli名字已经在包管理器已经存在被别人用了&＃xff0c;需要更该包名称&＃xff0c;我们可以前往package.json中的name中换一个名字。

{ "name": "sample-cli1", "version": "1.0.0", "bin": "cli.js", ...}


再次执行publish命令。出现 &＃43;sample-cli1&＃64;1.0.0即表示发布成功。

如果发布时报错&＃xff1a;no_perms Private mode enable, only admin can publish this module:

表示当前不是原始镜像&＃xff0c;要切换回原始的npm镜像

npm config set registry https://registry.npmjs.org/


至此你的node工具就可以提供给其他人使用了。

如果需要更新你的工具&＃xff0c;只要继续执行npm publish就可以更新发布了&＃xff0c;不过需要注意&＃xff0c;每次发布都需要修改版本号version的值&＃xff0c;同一个版本不允许发布两次。

{ "name": "sample-cli1", "version": "1.0.1", "bin": "cli.js", ...}


如果想要撤销本次发布可以执行

npm unpublish


不过需要注意&＃xff0c;只有在发包的24小时内才允许撤销发布的包&＃xff0c;超过24小时&＃xff0c;就无法撤回了。

本文完〜