原因

在工作中，需要開發(fā)一個(gè)腳手架，用于給相關(guān)用戶提供相關(guān)的開發(fā)便利性。

適合人群

對(duì)前端、Node操作有一定的了解，同時(shí)向了解腳手架開發(fā)過程或者需要自己實(shí)現(xiàn)一個(gè)腳手架的開發(fā)者。

目標(biāo)

1. 開發(fā)一個(gè)簡(jiǎn)單的腳手架，能夠提供給用戶進(jìn)行安裝。
2. 能夠輸出相關(guān)提示。
3. 對(duì)用戶文件進(jìn)行讀寫操作。
4. 在腳手架中使用Shell腳本。

步驟

開發(fā)腳手架

腳手架的開發(fā)最開始過程與普通的前端項(xiàng)目相同，需要一個(gè)入口文件command.js和配置文件package.json。

與其他配置文件不同的是，需要在package.json文件中加上一下一項(xiàng)：

{
 ...,
 "bin": {
    "cm-cli": "command.js"
  }
}

在配置文件中增加了此項(xiàng)后，只需要在配置文件根目錄下執(zhí)行npm link命令，即可使用cm-cli --help命令來查看加載的cm-cli腳手架。

如果你發(fā)布了你的腳手架，那么在其他用戶使用命令npm install -g cm-cli之后，便可以在全局下使用你的腳手架了。

對(duì)用戶進(jìn)行提示

在對(duì)注釋和命令進(jìn)行提示中，我們需要使用到commander包，使用npm install commander即可進(jìn)行安裝。（如果NPM版本低于5，則需要添加--save參數(shù)保證更新package.json配置文件）。

commander是一個(gè)提供用戶命令行輸入和參數(shù)解析的強(qiáng)大功能。有需要的可以閱讀相關(guān)的庫(kù)文檔。在這里我介紹兩個(gè)用的最多的方法。

option

能夠初始化自定義的參數(shù)對(duì)象，設(shè)置關(guān)鍵字和描述，同時(shí)還可以設(shè)置讀取用戶輸入的參數(shù)。具體用法如下：

const commander = require('commander');

commander.version('1.0.0')
  .option('-a, --aaa', 'aaaaa')
  .option('-b, --bbb', 'bbbbb')
  .option('-c, --ccc [name]', 'ccccc')
  .parse(process.argv);


if (commander.aaa) {
  console.log('aaa');
}

if (commander.bbb) {
  console.log('bbb');
}

if (commander.ccc) {
  console.log('ccc', commander.ccc);
}

具體展示如下：

command

該方法能夠在命令行增加一個(gè)命令。用戶在執(zhí)行此命令后，能夠執(zhí)行回調(diào)中的邏輯。具體用法如下：

commander
  .command('init <extensionId>')
  .description('init extension project')
  .action((extensionId) => {
    console.log(`init Extension Project "${extensionId}"`);
    // todo something you need
  });

具體展示效果如下：

對(duì)用戶文件進(jìn)行讀寫操作

通過上面的步驟，我們已經(jīng)能夠完成一個(gè)簡(jiǎn)單的腳手架了。下面，我們需要讀取用戶配置，同時(shí)為用戶生成一些模板文件。

讀取文件

現(xiàn)在，我們需要讀取用戶的cm-cli.json配置文件來進(jìn)行一些配置。

我們可以使用Node.js的fs文件模塊來對(duì)文件進(jìn)度讀操作，由于此處沒有太多難點(diǎn)，因此略去。

寫入文件模板

我們提前將模板文件存儲(chǔ)在CDN上，再根據(jù)本地讀取到的相關(guān)腳手架配置文件來進(jìn)行模板的下載。

注：腳手架中讀取的路徑為使用者使用時(shí)當(dāng)前路徑，因此沒有辦法將模板文件存儲(chǔ)在腳手架中進(jìn)行讀取。

我們可以使用諸如request這種庫(kù)來幫助我們進(jìn)行文件下載，簡(jiǎn)化操作步驟。執(zhí)行npm install request`即可進(jìn)行安裝。

注：在文件寫入時(shí)建議先判斷文件是否存在，再進(jìn)行覆蓋。

使用Shell腳本

與Node.js提供的API函數(shù)來看，有些人更加傾向于使用Shell腳本來進(jìn)行文件操作。幸運(yùn)的是，我們也可以在我們的腳手架中引入node-cmd來啟用對(duì)Shell腳本的支持。執(zhí)行npm install node-cmd即可進(jìn)行安裝。

具體示例如下：

commander
  .command('init <extensionId>')
  .description('init extension project')
  .action((extensionId) => {
    id = extensionId;
    console.log(`init Extension Project "${extensionId}"`);

    cmd.get(
      `
      mkdir -p static/${extensionId}

      mkdir tmp
      mkdir tmp/source-file
      mkdir tmp/build-file
      curl -o tmp/source-file/index.js https://xxxxxxxx.com?filename=index.js
      touch tmp/source-file/index.css

      curl -o tmp/build-file/server.js https://xxxxxxxx.com?filename=server.js
      curl -o tmp/build-file/router.js https://xxxxxxxx.com?filename=router.js
      curl -o tmp/build-file/package.json https://xxxxxxxx.com?filename=package.json
      
      cp tmp/source-file/* static/${extensionId}
      cp tmp/build-file/* ./
      rm -fr tmp
      npm install
      `,
      (err, data) => {
        console.log(data)
        if (!err) {
          console.log('init success');
          return;
        }

        console.error('init error');
      });
  });

我們可以快速的使用Shell腳本來進(jìn)行文件夾的創(chuàng)建和文件模板的下載。

總結(jié)

腳手架想要在終端能夠快速執(zhí)行，可以在package.json配置文件中增加相關(guān)字段。

腳手架需要能夠讀取相關(guān)終端輸入，可以使用commander庫(kù)來快速開發(fā)。

腳手架需要能夠執(zhí)行Shell腳本，可以使用node-cmd庫(kù)來快速實(shí)現(xiàn)需求。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論