การพัฒนาเชิงปฏิบัติของโหนดของเครื่องมือบรรทัดคำสั่ง mycli

สำหรับการเริ่มต้น

คุณต้องตรวจสอบให้แน่ใจก่อนว่ามีสภาพแวดล้อม node.js บนคอมพิวเตอร์

และรันโค้ดต่อไปนี้บนบรรทัดคำสั่งเพื่อเริ่มต้นไฟล์ package.json

npm init -y

ในเวลานี้ ข้อผิดพลาดจะถูกรายงานอย่างแน่นอนเมื่อใด ดำเนินการ mycli บนบรรทัดคำสั่ง

กำหนดค่าคำสั่งที่กำหนดเอง

package.json เพื่อเพิ่มฟิลด์ bin และเชื่อมโยงคำสั่ง mycli

• แต่ละคำสั่งสอดคล้องกับไฟล์ปฏิบัติการ

"bin": {
    "mycli": "./test.js"
  }

• สร้างไฟล์ /test.js ใหม่

console.log ("คำสั่ง mycli ดำเนินการเรียบร้อยแล้ว");

• จำเป็นต้องมีคำสั่ง install แต่โครงการยังไม่ได้เผยแพร่ไปยัง npm ดังนั้นในขณะนี้ ให้ใช้คำสั่ง npm link เพื่อ เชื่อมโยงคำสั่ง mycli กับโลกโกลบอล

ในขณะนี้ หากคุณเรียกใช้งาน mycli จากบรรทัดคำสั่ง ข้อผิดพลาดจะไม่ถูกรายงานอีกต่อไป

การกำหนดค่าสคริปต์

test.js:

console.log("การดำเนินการคำสั่ง mycli สำเร็จ");

จากนั้นดำเนินการ mycli และหน้าต่างป๊อปอัปข้อผิดพลาดจะปรากฏขึ้น

เนื่องจากเมื่อดำเนินการคำสั่ง mycli จะเทียบเท่ากับการปล่อยให้คอมพิวเตอร์ดำเนินการไฟล์ และระบบคอมพิวเตอร์ ไม่สามารถดำเนินการไฟล์ js ได้โดยตรง สิ่งนี้กำหนดให้เราต้องเพิ่มการกำหนดค่าในบรรทัดแรกของโค้ดสคริปต์เพื่อระบุ node.js บนคอมพิวเตอร์เพื่อรันไฟล์สคริปต์ js นี้

#!/usr/bin/env node

เนื่องจากสภาพแวดล้อมการดำเนินการมีการเปลี่ยนแปลง คุณต้องลบไฟล์ที่เชื่อมโยงก่อนหน้านี้ ตำแหน่งไฟล์อาจเป็น C:Program Filesnodejsnode_modules ค้นหา mycli แล้วลบออก npm link อีกครั้ง

ตอนนี้รัน mycli บนคอนโซลอีกครั้ง และคุณจะเห็นว่าคอนโซลพิมพ์ได้อย่างถูกต้อง

ชุดเครื่องมือที่เกี่ยวข้องใช้

• บรรทัดคำสั่ง Chalk เพื่อส่งออกฟอนต์สีสันสดใส
• เอฟเฟกต์การโหลด Ora คล้ายกับ
• คำสั่งการออกแบบ commander
ไลบรารีความคืบ
• หน้า ฟังก์ชัน inquirer (เช่น: ถามคำถาม...)

• การติดตั้ง

ชอล์ก

npm ติดตั้ง [email protected] -S

• ใช้การทดสอบ .js

const chalk = need("ชอล์ก");

//ชอล์ก
// const hello = chalk.red("สวัสดี");
// const สวัสดี = chalk.blue.bgRed("สวัสดี");
// const สวัสดี = chalk.blue.bgYellow("สวัสดี");
const สวัสดี = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("สวัสดี");
console.log(สวัสดี);

• การติดตั้ง

Ora

npm ติดตั้ง [email protected] -S

• ใช้ test.js

const ora = need("ora");

//หรือ
const สปินเนอร์ = ora({
  ข้อความ: "กำลังติดตั้ง..."
-
spinner.start();
setTimeout(() => {
  // spinner.stop();
  spinner.succeed("การติดตั้งสำเร็จ");
  // console.log("การติดตั้งสำเร็จ");
}, 2000)

• API ที่ใช้กันทั่วไป
  • start โหลด
  • stop หยุดโหลด
  • succeed สิ้นสุดการโหลดด้วยสไตล์ที่ประสบความสำเร็จ

Commander

เช่น vue -V git --version vue create และคำสั่งอื่นๆ จำเป็นต้องใช้ไลบรารี commander เพื่อนำคำสั่งดังกล่าวไปใช้

-V --help ฯลฯ หลังจากที่คำสั่งที่ใช้สามารถเข้าใจได้ว่าเป็นพารามิเตอร์ของคำสั่ง จากนั้นเราจำเป็นต้องได้รับพารามิเตอร์เหล่านี้และจัดการกับเหตุการณ์ต่างๆ โดยการตัดสินความแตกต่างในพารามิเตอร์

ในสภาพแวดล้อม ของโหนด สามารถรับพารามิเตอร์นี้ได้ผ่าน process.argv ไลบรารี คำสั่ง ช่วยให้เราสรุปวิธีการบางอย่างโดยที่เราไม่ต้องตัดสินคำสั่งที่ดำเนินการโดยอินพุตของผู้ใช้

• ติดตั้ง

npm install [email protected] -S

• โดยใช้

const commander = need("commander");
-
commander.parse(process.argv); // หลังจาก

การติดตั้งเสร็จสิ้น commander จะให้คำสั่งบางอย่างแก่เราโดยอัตโนมัติ เช่น --help เรามาทดสอบกันด้านล่าง:

mycli --help

• จัดเตรียมวิธีการตั้งค่าหมายเลขเวอร์ชัน

commander .version("1.0.0");

ดำเนินการ mycli -V และคุณจะเห็นว่าคอนโซลพิมพ์หมายเลขเวอร์ชัน 1.0.0

เมธอดคำสั่งแบบกำหนดเอง

commander.option(指令名, 描述, 回调函数)

• กำหนดค่าฟังก์ชันบางอย่างที่เขียนไว้ข้างต้นให้กับคำสั่ง --init :

commander.option("--init", "this is init", () => {
  //ชอล์ก
  // const hello = chalk.red("สวัสดี");
  // const สวัสดี = chalk.blue.bgRed("สวัสดี");
  // const สวัสดี = chalk.blue.bgYellow("สวัสดี");
  const สวัสดี = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("สวัสดี");
  console.log(สวัสดี);

  //หรือ
  const สปินเนอร์ = ora({
    ข้อความ: "กำลังติดตั้ง..."
  -
  spinner.start();
  setTimeout(() => {
    // spinner.stop();
    spinner.succeed("การติดตั้งสำเร็จ");
    // console.log("การติดตั้งสำเร็จ");
  }, 1,000)
})

ตอนนี้ดำเนินการทดสอบ mycli --init :

• วิธีส่งพารามิเตอร์ในคำสั่ง

คือ commander.option("--number <num>", "log a number", (num) => {
  console.log(หมายเลข);
})

<参数名> ระบุพารามิเตอร์ที่ต้องส่ง และ [参数名] ระบุพารามิเตอร์ที่ไม่จำเป็นต้องส่ง ป้อน mycli --number 100 บนคอนโซลแล้วกด Enter คุณจะเห็น 100 จะถูกส่งออก

วิธีการคำสั่งแบบกำหนดเอง

commander.command("create <projectName>").action((projectName)=>{
  console.log(ชื่อโครงการ);
})

ดำเนินการ mycli create xx แล้วกด Enter คุณจะเห็น xx ถูกส่งออกบนคอนโซล

ดูวิธีใช้

โดยดำเนินการ mycli --help คุณจะเห็นว่าคำแนะนำและคำสั่งที่เราเพิ่งกำหนดค่าปรากฏอยู่ในรายการวิธีใช้

• การติดตั้ง

สอบถาม

npm ติดตั้งสอบถาม -S

• วิธีการ prompt

สอบถาม.prompt([
    -
      ประเภท: "อินพุต",
      ชื่อ: "ชื่อผู้ใช้",
      ข้อความ: "กรุณากรอกชื่อผู้ใช้:"
    -
  ]).แล้ว((ตอบ)=>{

  })

type ระบุประเภทของคำถาม และค่าอาจเป็น: input , number , password , editor ฯลฯ

answer คือ {username: 输入的值}

• ประเภทคือ input ของประเภทอินพุต

const enquirer = need("inquirer");

commander.command("เพิ่มผู้ใช้").การกระทำ(() => {
  สอบถาม.prompt([
    -
      ประเภท: "อินพุต",
      ชื่อ: "ชื่อผู้ใช้",
      ข้อความ: "กรุณากรอกชื่อผู้ใช้:"
    -
  ]).แล้ว((ตอบ) => {
    console.log(คำตอบ);
  -
})

• ประเภทคือ confirm

commander.command("testcon").action(() => {
  สอบถาม.prompt([
    -
      ประเภท: "ยืนยัน",
      ชื่อ: "อายุ"
      ข้อความ: "คุณอายุเกิน 18 ปีหรือเปล่า?"
    -
  ]).แล้ว((ตอบ) => {
    console.log(คำตอบ);
  -
})

ป้อน y หรือ n เพื่อตัดสิน

• type คือ list ประเภทการเลือกวิทยุ

commander.command("testlist").action(() => {
  สอบถาม.prompt([
    -
      ประเภท: "รายการ",
      ชื่อ: "lib",
      ข้อความ: "เลือกกรอบงานที่จะใช้:",
      ตัวเลือก: [
        "vue2",
        "vue3",
        "ตอบสนอง",
        "เก๋ไก๋",
      -
    -
  ]).แล้ว((ตอบ) => {
    console.log(คำตอบ);
  -
})

ดำเนินการคำสั่ง mycli testlist :

ดาวน์โหลดเทมเพลต

• download-git-repo เป็นเครื่องมือสำหรับการดึงโค้ด

• ติดตั้ง

npm install [email protected] -S

• โดยใช้

const downgit = need("download-git-repo");

downgit("github:kongcodes/vue3-vant", downUrl, { โคลน: ​​false }, ฟังก์ชัน (ผิดพลาด) {
    console.log(ผิดพลาด)
})

เข้าใจว่าพารามิเตอร์แรกในวิธี downgit กำลังดาวน์โหลดเทมเพลตโครงการ vue3-vant ของผู้ใช้ kongcodes จาก github พารามิเตอร์ตัวที่สอง downUrl คือไดเร็กทอรีที่ควรดาวน์โหลดเทมเพลต clone พารามิเตอร์ที่สามคือว่าจะใช้ git clone เพื่อดาวน์โหลดหรือไม่ พารามิเตอร์ตัวที่สี่คือบางสิ่งที่จะดำเนินการเมื่อการดาวน์โหลดเสร็จสิ้น

• command

commander.command("create <projectName>").action((projectName) => {

  const สปินเนอร์ = ora({
    ข้อความ: "กำลังดาวน์โหลด https://github.com/kongcodes/vue3-vant..."
  -
  spinner.start();
  fs.mkdirSync(`./${ชื่อโครงการ}`);
  const downUrl = `${process.cwd()}\${ชื่อโครงการ}`;
  downgit("github:kongcodes/vue3-vant", downUrl, { โคลน: ​​false }, ฟังก์ชัน (ผิดพลาด) {
    ถ้า (ผิดพลาด) โยนผิดพลาด;
    spinner.stop();
    console.log(chalk.green("downgit สำเร็จ"));
  -
})

ดำเนินการ mycli create pro แล้วกด Enter ไดเร็กทอรี pro จะถูกสร้างขึ้นในไดเร็กทอรีปัจจุบัน และเทมเพลต vue3-vant จะถูกดาวน์โหลดไปยังไดเร็กทอรีนี้

ที่อยู่รหัส

https://github.com/kongcodes/mycli