Затем через неделю я закончил свою первую командную строку «Приложение для посылок» и решил создать пост, рассказывающий об этом, я провел целую неделю, изучая и обучая себя, как создать командную строку, потому что это было что-то новое для меня. . Когда я начал изучать React, идея создания командной строки, подобной create-react-app, была у меня в течение долгого времени, поэтому сегодня я научу вас, как создать простую командную строку.

Мне нравится видеть этот пост как планету Плутон, когда мы создаем командную строку, нам нужно знать, как сделать ее маленькой и красивой. Вы должны увидеть несколько командных строк с сообщениями с удивительными цветами и интуитивно понятным интерфейсом для пользователя. Примером может служить Netlify, это большая причина, потому что я больше не использую «Github Pages» для развертывания своих приложений. Прежде чем начать, нам нужно знать некоторые базовые концепции командной строки, поскольку, если мы хотим сначала создать небольшой интерфейс в виде командной строки, нам нужно знать, что означает командная строка.

Командная строка (CLI)

«Интерфейс командной строки» - это метод, который позволяет пользователю отдавать инструкции некоторой информационной программе в виде строки текста. Между CLI и Shell есть различия, поскольку Shell - это информационная программа, а CLI - это метод. Большой пример того, что такое командная строка, может быть create-response-app и Netlify, когда вы пишете create-response-app, собираетесь что-то выполнить, это задача командной строки в случае create-response-app создаст папку с некоторыми файлами.

  • Итак, прямо сейчас мы знаем, что командная строка - это не программа информатики, а метод.
  • Командная строка дает инструкции для информативной программы с текстовой строкой.
  • С помощью командной строки вы можете выполнить файл или программу.

Начнем!

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

  • esm: нам нужно использовать импорт, поэтому esm все настроит за нас.
  • фиглет: генерируйте текст баннера с некоторой типографикой.
  • listr: в некоторой командной строке есть список задач, в котором вы можете наблюдать за ходом чего-то вроде установки пакета.
  • ncp: нам нужно будет скопировать и вставить некоторые файлы, поэтому ncp возьмет на себя ответственность за это.
  • util: мы используем promisify.

- npm init
- npm i esm figlet listr ncp

Конфигурация пакета

Нам нужно выполнить некоторую конфигурацию, так как помещает корзину и сообщает пакету, будет ли проект общедоступным или нет, и папки по умолчанию:

Не волнуйтесь, я постараюсь объяснить вам, что происходит внутри пакета, как вы видите, что у нас те же зависимости, которые я вам дал, единственные различия внутри файла:

  • bin: с помощью bin мы говорим пакету, что мы напишем несколько команд для выполнения некоторых файлов. Некоторые люди изначально пишут cli.js (файл, в который мы будем записывать свойства нашей команды).
  • опубликовать конфигурацию: это помогает нам гарантировать, что данный пакет не помечен как «последний», не опубликован в глобальном общедоступном реестре или что модуль с заданной областью видимости по умолчанию является частным.
  • файлы: необязательное поле файлов - это массив шаблонов файлов, описывающих записи, которые будут включены при установке вашего пакета в качестве зависимости.

Дерево проекта

Нам нужно создать несколько файлов и папок, но не волнуйтесь, я оставлю вам свое дерево проекта:

├─bin
├── command-line
├─src
├── cli.js
├─templates
├── template.txt
├─ .gitignore
├─ packpage.json 
├─ package-lock

Написание инструкций

Хорошо, нам нужно написать функцию CLI и экспортировать ее, потому что позже мы выполним требование внутри «командной строки» (не волнуйтесь, я объясню шаг за шагом):

  • Напишите функцию cli внутри cli.js. Эта функция получает argv, в котором будет текст, написанный пользователем, в данном случае это будет имя папки, которую мы создадим.
  • Итак, в этой части мы импортируем функцию cli из cli.js и передаем ее
    «process.argv» как параметр.
  • #! / usr / bin / env node: это экземпляр строки shebang: самая первая строка в исполняемом текстовом файле на Unix-подобных платформах, которая сообщает системе, какой интерпретатор передать этот файл на исполнение. "Дополнительная информация".

Первое тестирование

Хорошо, у нас есть необходимый код, чтобы получить что-то от нашей команды, но перед его запуском нам нужно запустить npm link, а затем выполнить нашу команду.

Я знаю, что эта командная строка выглядит очень простой, но мы усложним ее. Нам нужно создать командную строку, которая копирует содержимое папки, а затем вставляет его в другой каталог.

Приветственный метод

Необязательно, но если мы хотим, чтобы наша команда была более красивой, хорошо иметь презентационное сообщение. Эту функцию нужно написать внутри cli файла, и нам нужно будет использовать figlet, так как этот пакет дает нам красивые баннеры:

Копировать и вставить функцию

Во-первых, нам нужно импортировать promisify из util, потому что иногда нам нужно скопировать и вставить много файлов, поэтому это будет способ получить все эти файлы без проблем:

Объяснение функции copyTempalteFiles:

  • templateDir: это будет направление, в котором у нас будут шаблоны.
  • targetDir: направление, в которое мы будем вставлять все наши файлы шаблонов.
  • clobber: не перезаписывайте файлы.

Нам нужно будет импортировать Путь, потому что это даст нам направление наших шаблонов.

Список заданий

Сначала я кратко познакомлю вас с listr: это пакет для создания списка задач, в котором пользователь может наблюдать за каждым состоянием команды.

Объяснение:

  • actualPath: мы используем import.meta.url, который дает нам фактический путь.
  • templatesDir: для этого мы используем «разрешение пути», первым параметром для метода resolve будет фактический путь, получающий его имя пути, а для вторым параметром будет путь к нашей папке с шаблоном.
  • TaskList: нам нужно создать асинхронную функцию, потому что задачи нужно вызывать с ожиданием, потому что иногда это может занять много времени. Внутри функции мы создадим константу, вызывающую класс, в который мы поместим наши задачи.

Вызов функций

Мы вызовем две наши функции HelloMessage и TaskList. Сначала мы вызываем метод HelloMessage, потому что это будет презентация, затем мы передаем «argv» в качестве параметра, потому что с этим мы можем получить имя папки (имя папки, которую мы создадим).

Окончательный код:

Запускаем нашу команду 🎊

Это конец нашего следа, запускаем команду и наблюдаем за магией

Эй, если это было полезно для вас, хлопайте мне в ладоши и подписывайтесь на меня в моих сетях!

Twitter: @ToyoJhornan
Github: https://github.com/karttofer