如何编写前端脚手架工具

川长思鸟来 2023-03-01 13:53 7阅读 0赞

tip  
参考目录  
https://www.jb51.net/article/150196.htm

# 思考 #

许多前端工具如webpack ，gulp的启动命令为其自己的名字

1、index.js文件顶部声明执行环境：

// index.js``#!/usr/bin/env node``console.log(``'hello world'``)

1.  bin字段里面写上这个命令行的名字，也就是 `hello-cli` ，它告诉npm，里面的js脚本可以通过命令行的方式执行，以 `hello-cli` 的命令调用。当然命令行的名字你想写什么都是你的自由，
2.  3、 在当前package.json目录下，打开命令行工具，执行 `npm link` ，将当前的代码在npm全局目录下留个快捷方式。
    
    npm检测到package.json里面存在一个bin字段，它就同时在全局npm包目录下生成了一个可执行文件：

## 原因 ##

因为安装node的时候，npm将这个目录配置为系统变量环境了，当你执行命令的时候，系统会先找系统命令和系统变量，然后到变量环境里面去查找这个命令名，然后找到这个目录后，发现匹配上了该命令名的可执行文件，接着就直接执行它。vue-cli也好，webpack-cli也好，都是这样执行的。

## 项目引入 ##

这样，你的第一个cli脚本就成功安装了，可以在命令行里面，直接敲你的cli名字，看看结果输出吧。

另外，如果你仅希望你的cli脚本仅在项目里执行，则需要在你项目里面新建一个目录，重复上述的操作，只是在第三步的时候，不要llink到全局里面去，而是使用 `npm i -D file:<你的脚本cli目录路径>` ，把它当成项目的依赖安装到node\_modules里面去，如果安装成功，那么在项目的package.json你会看到多了一条依赖，这条依赖的值不是版本号，而是你脚本的路径。然后在node\_modules里面会有一个.bin目录，里面就存放着你的可执行文件。

局部安装建议用 `npm i -D file:xxx` ，这样它会在package.json留条记录，方便其他小伙伴看到。自然，你的脚本最好也是放进项目目录里面。

当然，这样安装的cli脚本，必须在项目的package.json的scripts字段上声明脚本命令，然后通过 `npm run` 的方式执行。

## 参数读取:process.argv ##

通过 `process` 这个对象我们可以拿到当前脚本执行环境等一系列信息，其中就包括命令行的输入情况，这个信息，保存在 `process.argv` 这个属性里。

argv是个数组，前两位是固定的，分别是node程序的路径和脚本存放的位置，从第三位开始才是额外输入的内容。那么实现上面的功能就很简单了，只要读取argv数组的第三位，然后输出出来就可以了。

//index.js``console.log(`hello ${process.argv[2]||``'world'``}`)

npm社区中也有一些优秀的命令行参数解析包，比如[yargs ,tj][yargs _tj]的[commander.js ][commander.js]等等

**0x4 子进程**

现在，你可以自由自在的写你自己的cli脚本了。

如果你希望写一个项目打完包自动推上git的cli，或者自动从git仓库里面拉取项目启动模板，那么，你需要通过node的 `child_process` 模块开启子进程，在子进程内调用git命令：

//test.js``const child_process = require(``'child_process'``);` `let subProcess=child_process.exec(``"git version"``,``function``(err,stdout){`` ``if``(err)console.log(err);`` ``console.log(stdout);`` ``subProcess.kill()``});

不仅是git命令，包括系统命令、其他cli命令都可以在这里执行。特别是系统命令，使用系统命令对文件目录进行操作，效率比fs高到不知道哪里去了。

社区上也有一些不错的包，比如阮一峰老师推荐的[shelljs][]

# npm link #

Unexpected end of JSON input while parsing near‘···“,”es6-promise”:”^3.1’

解决方法：先清除缓存，再重新安装

*  清除缓存

npm cache clean --force1

*  重新安装

[yargs _tj]: https://github.com/yargs/yargs
[commander.js]: https://github.com/tj/commander.js
[shelljs]: https://github.com/shelljs/shelljs