快捷導(dǎo)航

利用node.js開(kāi)發(fā)cli的完整步驟

更新時(shí)間：2020年12月29日 09:35:48 作者：Harlan_Zhang

這篇文章主要給大家介紹了關(guān)于如何利用node.js開(kāi)發(fā)cli的完整步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

CLI介紹

命令行界面（英語(yǔ)：command-line interface，縮寫(xiě)：CLI），是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標(biāo)，用戶通過(guò)鍵盤(pán)輸入指令，計(jì)算機(jī)接收到指令后，予以執(zhí)行。

目前前端開(kāi)發(fā)中,CLI是常用的工具。前端三大框架Vue、React、Angular都有對(duì)應(yīng)的CLI，包括現(xiàn)在最流行的前端工程化的打包工具Webpack，也有對(duì)應(yīng)的webpack-cli。

在現(xiàn)代的前端開(kāi)發(fā)中,CLI提高了開(kāi)發(fā)的效率。讓相應(yīng)的前端開(kāi)發(fā)者免去了大量的重復(fù)性操作，節(jié)省了大量的時(shí)間。CLI可以完成的功能，包括但不限于初始化生成對(duì)應(yīng)的項(xiàng)目模板、執(zhí)行特定的腳本文件、在項(xiàng)目中創(chuàng)建新的模塊。下面來(lái)介紹一下前端工程師如何使用node.js來(lái)完成一個(gè)CLI。

創(chuàng)建項(xiàng)目

打開(kāi)終端，創(chuàng)建moka-cli的目錄

mkdir moka-cli

進(jìn)入目錄，初始化項(xiàng)目

cd moka-cli
npm init -y

根目錄下新建bin目錄,并新建index.js文件，此時(shí)目錄結(jié)構(gòu)如下

|-- moka-cli
 |-- package.json
 |-- bin
  |-- index.js

開(kāi)發(fā)cli需要借助commander、inquirer、chalk三個(gè)庫(kù)

npm install commander inquirer chalk --save

修改package.json文件，使用es moudle,并新增moka命令

package.json

{
 "name": "moka-cli",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
+ "type": "module",
+ "bin": {
+ "moka": "./bin/index.js"
+ },
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "chalk": "^4.1.0",
 "commander": "^6.2.1",
 "inquirer": "^7.3.3"
 }
}

接下來(lái)需要在/bin/index.js中編程,在第一行添加如下代碼，這行代碼是告訴系統(tǒng)要用node來(lái)執(zhí)行這個(gè)文件。

#!/usr/bin/env node

再添加下面代碼

#!/usr/bin/env node

console.log('moka-cli run!')

然后在項(xiàng)目根目錄下全局安裝項(xiàng)目

npm install -g

到這里，一個(gè)簡(jiǎn)單的CLI就完成了，可以打開(kāi)終端，在任意目錄下輸入moka,控制臺(tái)就會(huì)打印出對(duì)應(yīng)的消息。

$ moka
moka-cli run!

第三方庫(kù)介紹

moka-cli希望實(shí)現(xiàn)可以創(chuàng)建前端開(kāi)發(fā)模板的功能，可以使用moka命令來(lái)創(chuàng)建一個(gè)vue或react項(xiàng)目。

先來(lái)介紹一下使用到到第三方的庫(kù)

commander

文檔地址

用來(lái)實(shí)現(xiàn)命令的庫(kù)，在moka-cli中會(huì)用來(lái)實(shí)現(xiàn)create命令，實(shí)現(xiàn)用下面的命令行來(lái)創(chuàng)建一個(gè)vue-demo的項(xiàng)目

moka create vue vue-demo

inquirer

文檔地址

實(shí)現(xiàn)用戶和終端交互的庫(kù)，在moka-cli中使用create指令的時(shí)候會(huì)詢問(wèn)是否覆蓋已有項(xiàng)目

$ moka create vue moka-demo
? Template named moka-demo is already existed, are you sure to overwrite? (Y/n)

chalk

文檔地址

可以在終端界面顯示出多種顏色的文本和背景

核心功能

在根目錄創(chuàng)建actions和templates目錄,目錄結(jié)構(gòu)如下

|-- moka-cli
 |-- package-lock.json
 |-- package.json
+ |-- actions
+ | |-- create.js
 |-- bin
 | |-- index.js
+ |-- templates
+  |-- react
+  | |-- app.js
+  | |-- index.js
+  | |-- src
+  |  |-- index.js
+  |-- vue
+   |-- app.js
+   |-- index.js
+   |-- src
+    |-- index.js

templats下面用來(lái)存放通過(guò)CLI要生成的項(xiàng)目的模板，在這里先隨便創(chuàng)建幾個(gè)文件展示一下。

修改/bin/index.js文件

#!/usr/bin/env node
import create from '../actions/create.js';
import commander from 'commander';

const { program } = commander;

program.version('0.0.1');

program
 .command('create <template> [name]')
 .description('新建項(xiàng)目')
 .action(create);

program.parse(process.argv);

修改./actions/create.js文件

import fs from 'fs';
import path from 'path';
import chalk from 'chalk';
import inquirer from 'inquirer';

import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const TEMPLATES = ['vue', 'react'];

const targetPath = process.cwd();

function createTemplate(template, name) {
 const templatePath = path.join(__dirname, '../', `templates/${template}`);

 function readAndCopyFile(parentPath, tempPath) {
 let files = fs.readdirSync(parentPath);

 files.forEach((file) => {
  let curPath = `${parentPath}/${file}`;
  let stat = fs.statSync(curPath);
  let filePath = `${targetPath}/${tempPath}/${file}`;
  if (stat.isDirectory()) {
  fs.mkdirSync(filePath);
  readAndCopyFile(`${parentPath}/${file}`, `${tempPath}/${file}`);
  } else {
  const contents = fs.readFileSync(curPath, 'utf8');
  fs.writeFileSync(filePath, contents, 'utf8');
  }
 });
 }

 readAndCopyFile(templatePath, name);
}

function deleteTemplate(path) {
 if (fs.existsSync(path)) {
 fs.readdirSync(path).forEach(function (file, index) {
  var curPath = path + '/' + file;
  if (fs.lstatSync(curPath).isDirectory()) {
  // recurse
  deleteTemplate(curPath);
  } else {
  // delete file
  fs.unlinkSync(curPath);
  }
 });
 fs.rmdirSync(path);
 }
}

export default function create(template, name) {
 if (!TEMPLATES.includes(template)) {
 console.log(chalk.red(`No ${template} Template`));
 return;
 }

 const projectPath = path.resolve(targetPath, name);

 if (fs.existsSync(projectPath)) {
 inquirer
  .prompt([
  {
   name: 'template-overwrite',
   type: 'confirm',
   message: `Template named ${name} is already existed, are you sure to overwrite?`,
   validate: function (input) {
   if (input.lowerCase !== 'y' && input.lowerCase !== 'n') {
    return 'Please input y/n !';
   } else {
    return true;
   }
   },
  },
  ])
  .then((answers) => {
  // 如果確定覆蓋
  if (answers['template-overwrite']) {
   // 刪除文件夾
   deleteTemplate(projectPath);
   console.log(chalk.yellow(`Template already existed , removing!`));
   //創(chuàng)建新模塊文件夾
   fs.mkdirSync(projectPath);
   createTemplate(template, name);
   console.log(
   chalk.green(`${template} template has been created successfully!`)
   );
  }
  })
  .catch((err) => {
  console.log(chalk.red(err));
  });
 } else {
 fs.mkdirSync(projectPath);
 createTemplate(template, name);
 console.log(
  chalk.green(`${template} template has been created successfully!`)
 );
 }
}

最后在項(xiàng)目根目錄運(yùn)行以下命令，重新安裝一下moka-cli

npm install -g

隨便找一個(gè)路徑，運(yùn)行moka create <template> [name]命令來(lái)生成項(xiàng)目

moka create react react-demo

效果如下,會(huì)在該目錄下生成一個(gè)react-demo的文件夾，里面存放的就是moka-cli項(xiàng)目中/templates/react下的所有

$ moka create react react-demo
react template has been created successfully!

如果在該目錄下繼續(xù)創(chuàng)建一個(gè)同名的項(xiàng)目，就會(huì)提示是否覆蓋,輸入y后繼續(xù)執(zhí)行

$ moka create react react-demo
? Template named react-demo is already existed, are you sure to overwrite? Yes
Template already existed , removing!
react template has been created successfully!

create命令的核心邏輯是通過(guò)node的fs模塊來(lái)復(fù)制/templates下的文件，然后將其放到指定的路徑下，具體實(shí)現(xiàn)直接看代碼就可以來(lái)。