脚手架的开发总结
Opened this issue · 1 comments
laizimo commented
脚手架的开发总结
前言
最近在做一个脚手架的项目,涉及到了一些关于nodeJS端的操作。网上找了很多资源,以及一些设想,都在此处记录下来,作为一种总结。
正文
脚手架指令的构建
命令行指令操作时,需要使用到以下几个包:
@oclif/command
@oclif/config
@oclif/plugin-help
@oclif/dev-cli
首先,创建一个简单的CLI脚本文件run,如下:
#!/usr/bin/env node
require('@oclif/command').run()
.then(require('@oclif/command/flush'))
.catch(require('@oclif/errors/handle'));
然后在package.json中添加配置,如下:
{
"bin": { //命令指向的脚本地址
"clitest": "./bin/run"
}
}
之后,建立一个link,如下:
npm link //执行之后,会在命令行中出现clitest
然后,逐个建立脚手架命令。例如create命令,如下:
const Command = require('@oclif/command');
class CreateCli extends Command.Command {
constructor() {
super(...arguments);
}
async run() {
try {
console.log('create');
} catch(err) {
console.log(err);
}
}
}
CreateCli.description = 'create test';
exports.default = CreateCli;
最后,在package.json中指明command地址,如下:
"oclif": {
"commands": "./commands",
"bin": "clitest",
"plugins": [
"@oclif/plugin-help"
]
},
"files": [
"/bin",
"/commands"
],
脚手架命令部分构建基本完毕了。如下是执行成功的图片:
nodeJS路径问题
编写脚手架的过程中,路径问题经常容易出错。下面总结了一些nodeJS中常常会使用到的路径变量:
__dirname: 指当前执行文件所在目录的完整目录名
__filename: 指当前执行文件的带有完整绝对路径的文件名
process.cwd(): 指当前执行node命令时候的文件夹目录名
./: 指文件所在目录
os.homedir(): 指系统的home目录
下面是一些实验的数据结果,如下:
const path = require('path');
const os = require('os');
console.log(path.resolve(__dirname));
console.log(path.resolve(__filename));
console.log(process.cwd());
console.log(os.homedir());
console.log(path.basename(__dirname));
console.log(path.basename(__filename));
执行结果:
监听文件
此处使用到的npm是watch。
npm install watch
一般使用函数watch.watchTree(root)。在脚手架中,我们往往需要监听一些文件的改动情况,如下:
watch.watchTree(src, {
filter: (filePath) => {
// 过滤不需要被监听的文件和文件夹
// ...
}
}, (f, curr, prev) => {
if (typeof f == "object" && prev === null && curr === null) {
// Finished walking the tree
} else if (prev === null) {
// f is a new file
} else if (curr.nlink === 0) {
// f was removed
} else {
// f was changed
}
});
之后,我们需要对于新增文件、删除文件和文件改变中作出操作。
node端的登录和上传
此处使用到的npm是request。
npm install request
在登录请求和上传文件的过程中,我们需要使用到formData来进行上传,但是nodeJS并无FormData的对象,所以,这里就要涉及到使用request来进行上传了。
request.post({
url, //请求接口
form: {
userName: username,
password: password
}
}, (err, response: Response, body) => {
// ...
});
同理,上传文件时,也可以通过form表单的形式上传上去。但是,一般文件上传的接口都需要登录,所以需要在带上cookie。
const j = request.jar();
j.setCookie(cookie);
const req = request.post({
url,
jar: j
}, (err, res: Responese, body) => {
// ...
});
const form = req.form();
form.append(fileName, file);
tanwei-cc commented
不错,可以参考知名手脚架 如:create-react-app vue-cli