Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Узел практической разработки инструмента командной строки mycli

Автор：Eve Cole Время обновления：2022-06-09 17:33:27
В этой статье вы найдете пошаговое руководство по использованию узла на практике, а также о том, как создать инструмент/структуру командной строки mycli на основе узла. Надеюсь, она будет вам полезна!

Для инициализации

вы должны сначала убедиться, что на компьютере имеется среда node.js

, и выполнить следующий код в командной строке, чтобы инициализировать файл package.json

npm init -y

. При этом обязательно будет сообщено об ошибке. выполнение mycli в командной строке.

1.png

Настройте пользовательскую команду

package.json чтобы добавить поле bin , и свяжите команду mycli .

  • Каждая команда соответствует исполняемому файлу
«bin»: {
    "mycli": "./test.js"
  },
  • Создайте новый файл /test.js
console.log («команда mycli выполнена успешно»);
  • требуется команда install , но проект не опубликован в npm, поэтому на данный момент используйте команду npm link для свяжите команду mycli с глобальным миром.

В настоящее время, если вы запустите mycli из командной строки, об ошибке больше не будет сообщаться.

2.png

Файл

конфигурации скрипта

test.js:

console.log("Выполнение команды mycli успешно");

Затем выполните mycli , и появится всплывающее окно с ошибкой.

3.png

Это связано с тем, что выполнение команды mycli эквивалентно разрешению компьютеру выполнить файл, а компьютерная система не может напрямую выполнить файл js . Это требует от нас добавления конфигурации в первую строку кода сценария для указания node.js на компьютере для выполнения этого файла сценария js.

#!/usr/bin/env node

Поскольку среда выполнения была изменена, вам необходимо удалить ранее связанные файлы. Местоположение файла может быть C:Program Filesnodejsnode_modules . Найдите mycli и удалите его, а затем выполните. npm link еще раз.

Теперь снова выполните mycli на консоли, и вы увидите, что консоль печатает правильно.

Соответствующий набор инструментов использует

  • командную строку Chalk для вывода цветных шрифтов
  • . Эффект загрузки Ora аналогичен
    • интерактивной функции запроса
  • commander проектирования
    • библиотеки прогресса
  • inquirer например, задавать вопросы...)
  • Установка

Chalk

npm install [email protected] -S
  • Использовать тест .js
const chalk = require("мел");

// мел
// const hello = chalk.red("привет");
// const hello = chalk.blue.bgRed("привет");
// const hello = chalk.blue.bgYellow("привет");
const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("привет");
console.log(привет);

4.png

  • Установка

Ora

npm install [email protected] -S
  • use test.js
const ora = require("ora");

// ора
const spinner = ora({
  текст: "Установка..."
});
спиннер.старт();
setTimeout(() => {
  // спиннер.стоп();
  spinner.succeed("Установка прошла успешно");
  // console.log("Установка прошла успешно");
}, 2000)
  • Часто используемый API
    • start загрузки
    • stop загрузки
    • succeed завершение загрузки с успешным стилем

5.gif

Команды, обычно используемые при разработке

команд

, такие как vue -V git --version vue create и другие команды, для реализации таких команд должны использовать библиотеку Commander .

-V --help и т. д. после используемой команды можно понимать как параметры команды. Затем нам нужно получить эти параметры и обрабатывать различные события, оценивая различия в параметрах.

В среде узла этот параметр можно получить process.argv . Библиотека командира помогает нам инкапсулировать некоторые методы без необходимости оценивать инструкции, вводимые пользователем.

  • Установите
npm install [email protected] -S,
  • используя
const Commander = require("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 hello = chalk.blue.bgRed("привет");
  // const hello = chalk.blue.bgYellow("привет");
  const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("привет");
  console.log(привет);

  // ора
  const spinner = ora({
    текст: "Установка..."
  });
  спиннер.старт();
  setTimeout(() => {
    // спиннер.стоп();
    spinner.succeed("Установка прошла успешно");
    // console.log("Установка прошла успешно");
  }, 1000)
})

Теперь выполните тест mycli --init :

6.gif

  • Способ передачи параметров в команду
: 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 . Вы увидите, что инструкции и команды, которые мы только что настроили, появляются в списке справки.

7.png

  • установка

запроса

npm install inquirer -S
  • метод prompt для запроса
inquirer.prompt([
    {
      тип: «вход»,
      имя: "имя пользователя",
      сообщение: «Пожалуйста, введите имя пользователя:»
    }
  ]).then((ответ)=>{

  })

type указывает тип вопроса, а значение может быть: input , number , password , editor и т. д.

answer : {username: 输入的值}

  • , тип — это input типа ввода
const inquirer = require("inquirer");

Commander.command("добавить пользователя").action(() => {
  запросчик.подсказка([
    {
      тип: «вход»,
      имя: "имя пользователя",
      сообщение: «Пожалуйста, введите имя пользователя:»
    }
  ]).then((ответ) => {
    console.log(ответ);
  })
})
  • тип: confirm
Commander.command("testcon").action(() => {
  запросчик.подсказка([
    {
      введите: «подтвердить»,
      имя: «возраст»,
      сообщение: «Вам больше 18 лет?»
    }
  ]).then((ответ) => {
    console.log(ответ);
  })
})

Введите y или n чтобы вынести решение.

8.png

  • type — это list типов выбора радиокомандера.command
("testlist").action(() => {
  запросчик.подсказка([
    {
      тип: «список»,
      имя: "либ",
      сообщение: "Выберите платформу для использования:",
      выбор: [
        "вюе2",
        "вю3",
        «реагировать»,
        "стройный",
      ]
    }
  ]).then((ответ) => {
    console.log(ответ);
  })
})

Выполните команду mycli testlist :

9.png

Скачать шаблон

  • download-git-repo — это инструмент для извлечения кода.

  • Установите

npm install [email protected] -S,
  • используя
const downgit = require("download-git-repo");

downgit("github:kongcodes/vue3-vant", downUrl, {clone: ​​false}, function (err) {
    console.log(ошибка)
})

Под первым параметром метода downgit подразумевается загрузка шаблона проекта vue3-vant пользователя kongcodes с github. Второй параметр downUrl — это каталог, в который следует загрузить шаблон. Третий параметр clone — использовать ли git clone для загрузки. Четвертый параметр — это некоторые действия, которые необходимо выполнить после завершения загрузки.

  • command
Commander.command("create <projectName>").action((projectName) => {
в сочетании с методом команды
  const spinner = ora({
    текст: "Загрузка https://github.com/kongcodes/vue3-vant..."
  });
  спиннер.старт();
  fs.mkdirSync(`./${projectName}`);
  const downUrl = `${process.cwd()}\${projectName}`;
  downgit("github:kongcodes/vue3-vant", downUrl, {clone: ​​false}, function (err) {
    если (ошибка) выбросить ошибку;
    спиннер.стоп();
    console.log(chalk.green("успешное завершение работы"));
  })
})

Выполните mycli create pro и нажмите Enter. Каталог pro будет создан в текущем каталоге, и шаблон vue3-vant будет загружен в этот каталог.

Адрес кода

https://github.com/kongcodes/mycli
Связанные статьи