腳手架的開發總結

2021-09-11 09:44:55 字數 2601 閱讀 7516

最近在做乙個腳手架的專案,涉及到了一些關於nodejs端的操作。網上找了很多資源,以及一些設想,都在此處記錄下來,作為一種總結。github部落格

命令列指令操作時,需要使用到以下幾個包:

@oclif/command

@oclif/config

@oclif/plugin-help

@oclif/dev-cli

複製**

#!/usr/bin/env node

require('@oclif/command').run()

.then(require('@oclif/command/flush'))

.catch(require('@oclif/errors/handle'));

複製**

然後在package.json中新增配置,如下:

}複製**

之後,建立乙個link,如下:

npm link       //執行之後,會在命令列**現clitest

複製**

然後,逐個建立腳手架命令。例如create命令,如下:

const command = require('@oclif/command');

class createcli extends command.command

async run

() catch(err)

}}createcli.description = 'create test';

exports.default = createcli;

複製**

最後,在package.json中指明command位址,如下:

"oclif": ,

"files": [

"/bin",

"/commands"

],複製**

腳手架命令部分構建基本完畢了。如下是執行成功的:

編寫腳手架的過程中,路徑問題經常容易出錯。下面總結了一些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, 

}, (f, curr, prev) => else

if (prev === null) else

if (curr.nlink === 0) else

});複製**

之後,我們需要對於新增檔案、刪除檔案和檔案改變中作出操作。

此處使用到的npm是request。

npm install request

複製**

在登入請求和上傳檔案的過程中,我們需要使用到formdata來進行上傳,但是nodejs並無formdata的物件,所以,這裡就要涉及到使用request來進行上傳了。

request.post(

}, (err, response: response, body) => );

複製**

同理,上傳檔案時,也可以通過form表單的形式上傳上去。但是,一般檔案上傳的介面都需要登入,所以需要在帶上cookie。

const j = request.jar();

j.setcookie(cookie);

const req = request.post(, (err, res: responese, body) => );

const form = req.form();

複製**

前端腳手架

腳手架目錄 idea build configwebpack 配置檔案 dist打包輸出目 node modules依賴目錄 src assets資源 components自定義元件 pages每個vue 檔案對應乙個頁面,或者頁面的乙個元件 router路由 整個專案的路由跳轉配置 config....

腳手架安裝

1.先裝node 輸入 node v,出現相應的版本號,則說明安裝成功。2.安裝 映象 npm install g cnpm registry 3.安裝webpack npm install webpack 3.8.1 g g全域性安裝webpack版本3.8.1 webpack v檢視版本號 4....

koa的腳手架

1.什麼是腳手架?腳手架建成cli,koa的腳手架就是koa cli 咱們之前在做koa框架開發的時候,會發現在乙個專案中咱們的目錄結構是非常清晰的,第三方包,模板,路由都會被規範到對應的資料夾中,但是在最後做專案的時候如果所有的檔案和資料夾都需要自己建立,就會非常的麻煩,這時候koa中給咱們提供了...