脚手架的开发总结

·  阅读 2907
脚手架的开发总结

前言

最近在做一个脚手架的项目,涉及到了一些关于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);
复制代码

如果你对我的文章感兴趣的话,欢迎关注我的微信公众号。

微信公众号

分类:
前端
标签:
分类:
前端
标签: