腳手架的開發總結

前言

最近在作一個腳手架的項目，涉及到了一些關於nodeJS端的操做。網上找了不少資源，以及一些設想，都在此處記錄下來，做爲一種總結。github博客

正文

腳手架指令的構建

命令行指令操做時，須要使用到如下幾個包：

@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);
複製代碼