Затем через неделю я закончил свою первую командную строку «Приложение для посылок» и решил создать пост, рассказывающий об этом, я провел целую неделю, изучая и обучая себя, как создать командную строку, потому что это было что-то новое для меня. . Когда я начал изучать 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