Создание расширенного интерфейса командной строки - с помощью TypeScript

Уже знаете, как сделать простой интерфейс командной строки? Расширьте свои знания с помощью этой статьи

Эта статья предназначена для людей, которые уже имеют базовый опыт создания интерфейса командной строки. Мы собираемся создать небольшую версию CGX CLI и использовать ту же структуру папок. CLI делает следующее;

«Создать всю рекомендуемую документацию по уценке (предварительно заполненную) для стандартов сообщества Github, Gitlab и Bitbucket»

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

Примечания:

- Будет некоторое совпадение с настройкой из предыдущей статьи, которую я писал о создании небольшого интерфейса командной строки для пиццы на TypeScript.

- Каждый файл, упомянутый в этой статье, имеет ссылку на полный / исходный файл.

Настройка проекта

Сначала мы инициализируем package.json с помощью npm init. Вы можете выбрать имя, автора, версию, описание, ключевые слова и лицензию.

зависимости

• figlet - Получите красивое изображение ASCII из строки
• inquirer - набор общих интерактивных пользовательских интерфейсов командной строки.
• fs-extra - fs-extra содержит методы, которые не включены в пакет vanilla Node.js fs. Например, mkdir -p, cp -r и rm -rf.
• types / fs-extra - определения TypeScript для fs-extra
• inversify - мощная и легкая инверсия контейнера управления для приложений JavaScript и Node.js на базе TypeScript.
• kleur - Самая быстрая библиотека Node.js для форматирования текста терминала с помощью цветов ANSI!
• Reflection-metadata - Polyfill для API отражения метаданных
• tslib - библиотека времени выполнения для вспомогательных функций TypeScript

Нам нужно установить все наши зависимости:

npm i figlet inquirer fs-extra @types/fs-extra inversify kleur reflect-metadata tslib

devDependencies

• types / node - определения TypeScript для Node.js
• types / inquirer - Определения TypeScript для запрашивающего
• types / figlet - Определения TypeScript для figlet
• liftr / tscov - проверьте охват типов любого проекта TypeScript с помощью этого простого пакета npm
• ts-node - среда выполнения TypeScript и REPL для node.js с поддержкой исходной карты
• typedoc - создание документации API для проектов машинописного текста.
• typescript - TypeScript - это язык для разработки JavaScript в масштабе приложения.

Затем следует установка наших devDependencies:

npm i @types/node @types/inquirer @types/figlet @liftr/tscov ts-node typedoc typescript --save-dev

Корзина и основная

В нашем package.json нам нужно установить точку входа нашего приложения (main и bin). Это будет наш скомпилированный index.js файл в папке lib: ./lib/index.js.

advanced-cli - это команда, которую вы используете, чтобы в конечном итоге вызвать вас через интерфейс командной строки.

Скрипты

Теперь нам нужно несколько скриптов, чтобы упростить себе задачу. У нас есть десять скриптов:

• npm start - запускает наши build и global скрипты вместе. Используйте это, чтобы запустить свой интерфейс командной строки
• npm run build - запускает наш clean:some скрипт и преобразует наши файлы TypeScript в файлы JavaScript в lib папке.
• npm run global - устанавливает наш CLI глобально и запускает CLI
• npm run clean:some - удаляет папки lib и docs.
• npm run clean:all - удаляет папки и файл node_modules, package-lock.json, lib и docs.
• npm run refresh - запускает наш clean:all скрипт и запускает npm install
• npm run tscov - проверяет покрытие типа не менее 90%
• npm run tscov:d - увидеть покрытие отсутствующего типа
• npm run publish-package - запускает наши build и npm publish скрипты
• npm run docs - автоматически формирует документацию в docs папке.

Напишите в package.json следующее:

TSconfig

Для нашего интерфейса командной строки некоторые конфигурации TypeScript установлены в файле с именем tsconfig.json, создаем этот файл в корне и записываем в него следующие конфигурации:

Среда

Создайте файл с именем advanced-cli в папке с именем bin. С этим содержанием:

Время кодирования!

Структура папки - 1

Создайте папку src со следующими папками в ней:

• модели
• вопросов
• шаблоны
• утилиты

Также создайте в папке src следующие файлы:

• index.ts
• cli.ts

Модели - 2

Далее мы собираемся начать создавать интерфейсы и перечисления внутри нашей папки models, в файле с именем answer-choice.ts. Я выбрал перечисления вместо констант, потому что свойства в нем имеют сходство с другими свойствами. Поэтому следует сгруппировать вместе. Название интерфейсов Answer и choice говорит само за себя.

Следующий файл; filename.ts содержит имена файлов, включая их расширение. В данном случае .md для уценки.

Наш последний файл; path.ts имеет конкретные пути, по которым должен быть сгенерирован файл. Это отличается для gitlab и github.

Вопросы - 3

Теперь мы собираемся использовать наши перечисления и интерфейсы в наших вопросах. Создайте файл с именем provider.question.ts внутри нашей папки вопросов. Импорт inquirer, это позволяет нам задавать вопросы в командной строке и предпринимать действия на основе ответа. У нас есть асинхронная функция, которая содержит список и подсказку. Возвращает ответ.

Создайте еще один файл с именем gitlab-file.question.ts:

И последний файл вопросов под названием github-file.question.ts:

Когда у вас будет больше файлов на одного поставщика, вы можете легко добавить их в listOfFiles.

Экспортируйте вопросы в файл index.ts:

Утилиты - 4

Необязательно: утилиты не являются обязательными. В моем собственном проекте я использовал одну утилиту, чтобы проверить, существует ли уже файл / папка, если не создать файл / папку. Другая утилита предназначалась для многоразовых и красивых журналов консоли (ошибки, успехи, информация и т. Д.). Их можно найти здесь.

Шаблоны - 5

Внутри нашей templates folder мы создаем папку с именемdefault. Внутри папки по умолчанию создаем файл default.template.ts. Как видно из названия файла, это будет наш шаблон по умолчанию, в котором будут создаваться разные файлы. Мы используем внедрение зависимостей withinversify. Наш шаблон может быть Injected в другие шаблоны из-за декоратора @injectable. Чтобы создать файл на вашем локальном компьютере, мы используем fs.writeFile из fs-extra.

Примечание. оригинальный generateFile метод содержит информацию о том, существует ли файл / папка или нет, и возможность перезаписать файлы.

Создайте в templates другую папку с именем gitlab. Внутри этой папки создайте файл с именем merge-request.template.ts. В нашем классе шаблона у нас есть три свойства;

• fileName - мы используем наше ранее сделанное перечисление для имени нашего файла с расширением
• hasPath - установите значение true, если сгенерированный файл не должен находиться в корне вашего проекта
• pathOfFile - укажите путь к файлу, которому он должен принадлежать

Мы снова используем декоратор @injectable, но теперь еще и декоратор @inject для внедрения нашего шаблона по умолчанию.

Открытый метод, в котором мы вызываем общедоступный многоразовый generateFile метод нашего шаблона по умолчанию. И частный метод, в который мы вставляем содержимое нашего файла разметки.

Затем в нашей папке templates создайте папку с именем github. Внутри этой папки создайте файл с именем feature-request.template.ts. Этот файл очень похож на предыдущий. Но имеет разные значения свойств и содержимое файла. Теперь мы можем легко создавать больше шаблонов для будущих файлов.

cli.ts - 6

Предпоследний файл - cli.ts. Мы внедряем наши два шаблона в конструктор и вызываем метод executeCLI. В этом методе мы спрашиваем пользователя, какого провайдера он хочет выбрать. Если он выберет Github, будет вызван наш githubActions метод. Здесь задается второй вопрос; какой файл пользователь хочет сгенерировать. В этом случае у нас есть только один файл. После выбора файла он будет сгенерирован. То же самое применимо, если бы мы выбрали Gitlab.

index.ts - 7

Наш последний файл index.ts - это то место, где инициализируется наш интерфейс командной строки. Нам нужно reflect-metadata для пользовательских декораторов, используемых в этом проекте. Индексная функция содержит контейнер, к которому мы привязываем все классы (которые содержат инъекционный декоратор) как одноэлементную область видимости. В конце мы возвращаем CLI, где будут заданы наши вопросы.

Если мы сейчас запустим npm start, мы получим два вопроса. После ответа на них у нас теперь есть сгенерированный файл внутри нашего локального проекта.

Спасибо за чтение! Мой Github. Подумайте о прочтении некоторых из моих других статей и взгляните на мой проект с открытым исходным кодом: