脚手架的开发总结

[laizimo]

脚手架的开发总结

前言

最近在做一个脚手架的项目，涉及到了一些关于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]

不错，可以参考知名手脚架 如：create-react-app vue-cli

https://github.com/tanwei-cc/frontend-dev-tools/blob/master/%E6%9E%84%E5%BB%BA%E6%89%93%E5%8C%85/index.md#%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA