Mengapa perancah diperlukan? Penjelasan terperinci tentang langkah-langkah untuk membina perancah dalam nod

Mengapa perancah diperlukan? Bagaimana untuk membina perancah? Artikel berikut memperkenalkan langkah-langkah untuk membina perancah pada nod. Saya harap ia akan membantu semua orang!

1 Mengapa perancah diperlukan

• Jana struktur projek dan fail konfigurasi secara dinamik berdasarkan interaksi.
• Pengguna memuat turun templat berbeza melalui interaksi arahan
• Memberikan templat projek tersuai melalui enjin templat
• Apabila templat berubah, anda hanya perlu mengemas kini templat dan pengguna melakukannya tidak perlu mengemas kini perancah [Cadangan tutorial berkaitan: tutorial video nodejs, Pengajaran pengaturcaraan]

2 Langkah pembinaan

• Buat folder mycli baharu (nama fail boleh disesuaikan), buat fail bin baharu di bawah, buat fail bin baharuindex.js, ini index.js ialah fail kemasukan, index.jstambah pengepala fail#!/usr/bin/env nodeKod

• menjana fail package.json Pada masa ini, akan ada objek konfigurasi bin nilai ialah nama perancah global, dan nilainya ialah laluan index.js bagi fail tong fail masukan.

    npm init -y
    npm install

• Pautkan perintah global perancah kepada perintah global Jika terminal mencetak mycli, pautannya berjaya.

  //命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。
  npm link

• Kebergantungan pemasangan

  npm install commander inquirer@8.2.5 download-git-repo chalk@4.1.2 ora@5.4.1 figlet handlebars

• commander: alat baris arahan, yang dengannya kita boleh membaca Dapatkan arahan arahan baris dan ketahui perkara yang pengguna mahu lakukan
• inquirer: Alat baris arahan interaktif menyediakan pengguna antara muka yang cantik dan cara untuk bertanya soalan
• download-git-repo : Muat turun templat jauh alat, bertanggungjawab untuk memuat turun projek templat gudang jauh
• chalk: Pemalam warna, digunakan untuk mengubah suai gaya output baris arahan, membezakan maklumat dan log ralat melalui warna, jelas dan intuitif
• ora: Digunakan untuk memaparkan kesan pemuatan, serupa dengan kesan pemuatan halaman hujung hadapan Untuk operasi yang memakan masa seperti memuat turun templat, kesan pemuatan boleh menggesa pengguna bahawa ia sedang dijalankan tunggu dengan sabar
• figlet : Gaya fon kosong

Nota: Kod di bawah diletakkan dalam fail tong index.js untuk menyahpepijat

2.1 commander.js gambaran keseluruhan

commander.js Ia ialah alat yang digunakan untuk membina atur cara baris arahan nod, membolehkan anda menggunakan arahan tersuai untuk menjalankan skrip nod pada baris arahan global. Pada asalnya, kami hanya boleh menjalankan skrip melalui node xxx.js dalam direktori akar fail di mana skrip itu terletak Selepas membina program baris arahan melalui komander, kami boleh terus memasukkan arahan tersuai dalam mana-mana direktori, seperti desktop, seperti direktori pengguna, Anda boleh menjalankan skrip secara langsung, yang lebih mudah.

#!/usr/bin/env node
//就是解决了不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件。
//node.js内置了对命令行操作的支持，在 package.json 中的 bin 字段可以定义命令名和关联的执行文件。
const program = require("commander")
program.version('1.1.0')

function getFramwork (val) {
  console.log(val);
}

const myhelp = function (program) {
  program.option(&#39;-f --framwork <framwork>&#39;, &#39;设置框架&#39;, getFramwork)
}

const createProgress = function (program) {
  program.command(&#39;create <progress> [other...]&#39;)
    .alias(&#39;crt&#39;)
    .description(&#39;创建项目&#39;)
    .action((progress, arg) => {
      console.log(progress, arg);
    })
}
myhelp(program);
createProgress(program);
program.parse(process.argv)
// 补充
.parse()
// 作用就是解析，参数就是要解析的字符串，一般使用时参数就是用process.argv，就是用户输入参数

Laksanakan arahan global mycli untuk mengeluarkan semua arahan~~

2.2 download-git-repo

• download(repositori, destinasi, pilihan, panggil balik)
• repository: Alamat muat turun
• destination: Laluan muat turun
• options: Item konfigurasi {clone: ​​​​true}
• callback: Panggilan balik selepas memuat turun

#!/usr/bin/env node
const download = require('download-git-repo');
download('direct:https://gitlab.com/flippidippi/download-git-repo-fixture.git', "xxx", { clone: true }, (err) => {
  console.log(err ? 'Error' : 'Success')
})

Laksanakan mycli untuk melihat xxx fail

dijana di bawah fail

2.3 Inquirer (interaksi arahan)

inquirer ialah koleksi antara muka pengguna terminal interaktif yang biasa digunakan. Ringkasnya, inquirer ialah perpustakaan yang membolehkan kami melakukan pelbagai gelagat interaktif terminal dengan mudah.

inquirer terutamanya menyediakan tiga kaedah untuk memudahkan kami mendaftar soalan

• prompt(questions) => promiseKaedah ini ialah kaedah teras interaksi terminal Kaedah gesaan memberitahu terminal untuk memulakan antara muka arahan interaktif. - Kaedah segera perlu lulus dalam tatasusunan soalan Tatasusunan soalan mengandungi setiap soalan dalam bentuk objek Makna medan struktur khusus soalan akan diperkenalkan kemudian. - Nilai pulangan kaedah gesaan ialah objek janji, dan nilai pulangan yang diterima oleh janji. maka ialah objek jawapan mengandungi hasil data jawapan kepada semua soalan sebelumnya.

#!/usr/bin/env node
const inquirer = require("inquirer")
function getUsername() {
  return inquirer
    .prompt([
      {
        type: "input",
        name: "progress",
        message: "请输入项目名称",
        default: "progress",
        filter(input) {
          return input.trim()
        },
        validate(input) {
          return input.length > 0
        },
      },
    ])
    .then((answer) => {
      console.log(answer)
    })
}
function getFramework() {
  return inquirer
    .prompt([
      {
        type: "list",
        name: "framework",
        choices: [
          "express",
          new inquirer.Separator(),
          "koa",
          new inquirer.Separator(),
          "egg",
        ],
        message: "请选择你所使用的框架",
      },
    ])
    .then((answer) => {
      console.log(answer)
    })
}

function getSelect() {
  return inquirer
    .prompt([
      {
        type: "checkbox",
        name: "userndasde",
        choices: [
          { name: "pr", disabled: true },
          { name: "oa", checked: true },
          "gg",
        ],
        message: "需要的验证格式",
        // default: ["oa"],
      },
    ])
    .then((answer) => {
      console.log(answer)
    })
}
async function init() {
  await getSelect()
  await getUsername()
  await getFramework()
}
init()

2.4 ora dan kapur (pencantikan)

Selepas pengguna memasukkan jawapan, templat mula memuat turun Pada masa ini, gunakan ora untuk menggesa pengguna bahawa muat turun sedang dijalankan.

Nota: Ambil perhatian bahawa versi yang berbeza mempunyai kaedah pengenalan yang berbeza Di sini kami menggunakan ora(versi 5.4.1), chalk(versi 4.1.2)

.

const ora = require("ora")
const chalk = require("chalk")
const spinner = ora("Loading unicorns").start()
spinner.text = chalk.blue("下载中~~~~~~")
setTimeout(() => {
  spinner.succeed(chalk.red("下载成功!"))
  spinner.fail("下载失败!")
  spinner.warn("警告！")
}, 2000)

2.5 figlet(镂空文字)

镂空文字调试器地址：地址

figlet旨在完全实现JavaScript中的FIGfont规范。它可以在浏览器和Node.js中工作。

用法

figlet.text( description,{options},callback(err,data){}) 这个是异步的会被

参数

• description：需要格式化的字符串

• options：参数配置

  • Font：字体，Default value:Standard；
  • horizontalLayout：布局，Default value:default; Values:{default,full,fitted};
  • verticalLayout:垂直布局, Default value:default; Values:{defalut,full,fitted,controlled smushing,universal smushing};
  • Width:宽度;
  • whitespaceBreak:换行(Boolean); Default value:false

• callback(err,data):回调

const figlet = require("figlet")
const chalk = require("chalk")
//简单函数
function handleAsync(params) {
  const JAVASCRIPT = figlet.textSync(
    "NODEJS",
    {
      font: "big",
      horizontalLayout: "fitted",
      verticalLayout: "controlled smushing",
      width: 600,
      whitespaceBreak: true,
    },
    function (err, data) {
      if (err) {
        console.log("Something went wrong...")
        console.dir(err)
        return
      }
      console.log(data)
    }
  )

  console.log(chalk.blue.bold(JAVASCRIPT))
}
handleAsync()

总结

创建一个完整的脚手架

目录结构：

• bin/index.js

#!/usr/bin/env node
console.log("adas");
require("../lib/commander/index.js")

• lib/commonder/index.js

const program = require("commander")
const init = require('../inquirer/index');
const downloadFun = require("../core/download.js");
program.version('1.1.0')
function getFramwork (val) {
  console.log(val);
}
const myhelp = function (program) {
  program.option(&#39;-f --framwork <framork> [other...]&#39;, &#39;设置框架&#39;, getFramwork)
}
const createProgress = function (program) {
  program.command(&#39;create <progress> [other...]&#39;)
    .alias(&#39;crt&#39;)
    .description(&#39;创建项目&#39;)
    .action((progress, arg) => {
      init();
    })
}
const downloadUrl = function (program) {
  program.command(&#39;download <url> [...other]&#39;)
    .description(&#39;下载内容&#39;)
    .action((url, ...args) => {
      console.log(args);
      downloadFun(url, args[1].args[1])
    })
}
myhelp(program);
downloadUrl(program);
createProgress(program)
program.parse(process.argv)

• lib/core/action.js (package.json重写)

const fs = require('fs');
const path = require("path");
const handlebars = require("handlebars");
  function modifyPackageJson (options) {
    let downloadPath = options.projectName;
    const packagePath = path.join(downloadPath, 'package.json');
    console.log(packagePath, "packagePath");
    
    //判断是否存在package.json文件
    if (fs.existsSync(packagePath)) {
      let content = fs.readFileSync(packagePath).toString();
      
      //判断是否选择了eslint
      if (options.isIslint) {
        let targetContent = JSON.parse(content);
        content = JSON.stringify(targetContent);
        targetContent.dependencies.eslint = "^1.0.0";
        console.log("content", content);
      }
      
      //写入模板
      const template = handlebars.compile(content);
      const param = { name: options.projectName };
      const result = template(param);
      
      //重新写入package.json文件
      fs.writeFileSync(packagePath, result);
      console.log('modify package.json complate');
    } else {
      throw new Error('no package.json');
    }
  }
  module.exports = modifyPackageJson

• lib/core/download.js

  const download = require('download-git-repo');
  const ora = require("ora");
  const chalk = require("chalk");
  const figlet = require("figlet");
  const modifyPackageJson = require("./action")
  
  function handleAsync (params) {
    const JAVASCRIPT = figlet.textSync('JAVASCRIPT', {
      font: 'big',
      horizontalLayout: 'fitted',
      verticalLayout: 'controlled smushing',
      width: 600,
      whitespaceBreak: true
    }, function (err, data) {
      if (err) {
        console.log('Something went wrong...');
        console.dir(err);
        return;
      }
      console.log(data);
    });
    console.log(chalk.blue.bold(JAVASCRIPT));
  }
  
  const downloadFun = (url, option) => {
    const spinner = ora("Loading unicorns").start()
    spinner.text = chalk.blue("下载中");
    
    download(url, option.projectName, { clone: true }, function (err) {
      if (err) {
        spinner.fail("下载失败!");
        handleAsync()
      } else {
        spinner.succeed(chalk.red("下载成功!"))
        console.log(chalk.blue(`cd ${option.projectName}`))
        console.log(chalk.red("npm install"))
        console.log(chalk.yellow(`npm run dev`))
        modifyPackageJson(option)
        handleAsync()
      }
    })
  }
  module.exports = downloadFun;

• inquire/index.js 注意frameworkConfig写自己的gitlab仓库地址

  const inquirer = require("inquirer");
  const downloadFun = require("../core/download.js");
  const frameworkConfig = {
    front: "https://gitlab.com/flippidippi/download-git-repo-fixture.git",
    manager: "https://gitlab.com/flippidippi/download-git-repo-fixture.git"
  }
  const config = {};
  
  function getFramework () {
    return inquirer.prompt([
      {
        type: 'list',
        name: 'framework',
        choices: ["front", "manager"],
        message: "请选择你所使用的框架"
      }
    ]).then((answer) => {
      return answer.framework;
    })
  }
  
  function getProjectName () {
    return inquirer.prompt([
      {
        type: 'input',
        name: 'projectName',
        message: '项目名称',
        filter (input) {
          return input.trim();
        },
      }
    ]).then((answer) => {
      console.log(answer, "FDsfs");
      return answer.projectName;
    })
  }
  
  function getIsEslint () {
    return inquirer.prompt([
      {
        type: 'confirm',
        name: 'isIslint',
        message: '是否使用eslint校验格式?'
      }
    ]).then((answer) => {
      return answer.isIslint;
    })
  }
  
  async function init () {
    config.projectName = await getProjectName();
    config.framework = await getFramework();
    config.isIslint = await getIsEslint();
    let url = config.framework == "front" ? frameworkConfig.front : frameworkConfig.manager;
    downloadFun("direct:" + url, config);
  }
  module.exports = init;

更多node相关知识，请访问：nodejs 教程！

Atas ialah kandungan terperinci Mengapa perancah diperlukan? Penjelasan terperinci tentang langkah-langkah untuk membina perancah dalam nod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!