腳手架的開發總結

zimo發表於2019-01-10

前言

最近在做一個腳手架的專案，涉及到了一些關於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);
複製程式碼

相關文章