Создайте свой собственный CLI с помощью Node.js
Когда дело доходит до настройки вашего проекта в React Native, как и в любом другом фреймворке, у вас есть два варианта:
- Вы делаете новую установку и добавляете свои модули один за другим.
- Вы клонируете начальный шаблон, затем начинаете программировать
Часто начальный шаблон был бы идеальным выбором для быстрого запуска, потому что он поставляется с некоторыми готовыми к использованию экранами и функциями, но загвоздка в том, что, поскольку начальные наборы не обновляются часто, модули обычно отстают от своих последних версий. версий, поэтому все ваше приложение, возможно, устарело.
Так что мы можем сделать вместо этого? Начать проект с нуля кажется правильным, но как мы можем упростить и ускорить этот процесс?
Введите интерфейс командной строки
Ждать! О каком CLI идет речь? В этой статье мы создадим собственный интерфейс командной строки, который будем использовать в будущих проектах. Наш CLI будет отвечать за установку React Native и часто используемых модулей. Мы также упакуем наш CLI и опубликуем его на npm.
Прохладный! Давайте начнем!
Для этого проекта мы будем использовать commander.js, так как мы находимся в среде Node.js. Commander.js — это популярный и авторитетный инструмент для создания командных программ в стиле, который вы бы использовали на терминале. Мы также будем использовать shelljs для последовательного запуска команд оболочки в каждой среде ОС.
Сначала определимся, что будет в коробке. Несмотря на то, что для React Native существует множество отличных библиотек, основные из них практически одинаковы. Вот примерный список модулей, которые я бы использовал:
- Реагировать на навигацию
- Редукс Инструментарий
- React Native реанимирован
- Реагировать на запрос
- Аксиос
- Лотти
- Формик и Юп
Конечно, ваши могут отличаться, поэтому не стесняйтесь добавлять свои собственные. На данный момент мы можем составить массив из этих модулей следующим образом:
Затем давайте установим command.js от npm i commander --save и начнем писать наш CLI:
Вот базовая версия нашего командного скрипта, который запускает реактивную установку и завершает работу после нее. Разберем для лучшего понимания:
Во-первых, мы поместили директиву bash поверх нашего скрипта, чтобы получить доступ к переносимости в системах UNIX. Это также необходимо для того, чтобы наш скрипт вел себя как cli при запуске. Затем мы представляем нашу программу и определяем ее имя, версию и описание. Я выбрал rncli в качестве имени, что означает, что при его использовании вы должны ввести rncli в терминале. В программах Commander.js есть команды, у которых есть аргументы и опции. Думайте о npm, когда устанавливаете модуль. Например, когда вы пишете следующее:
npm install react-native --save
Здесь у нас есть npm наша программа, install наша команда, react-native наш аргумент и, наконец, --save наша опция. То же самое касается этого примера. Мы получили команду install и указываем каталог для установки в качестве аргумента.
Аргументы: <required> или [optional]. Если вы опустите обязательный аргумент, вы получите сообщение об ошибке.
Наконец, в последней строке мы указываем действие, которое должно быть запущено, и запускаем команду установки по умолчанию, как мы делали это из терминала.
Теперь давайте продолжим и установим наши модули:
Здесь мы генерируем объединенную строку имен модулей и передаем ее команде npm install. Мы также предоставляем опцию --typescript для пользователей, которые предпочитают писать в TS.
На данный момент мы добились того, чего хотели: простой, скучный интерфейс командной строки, который экономит нам пару минут. Тем не менее, вы хотели бы улучшить его немного больше, не так ли?
Становление любвеобильнее
Чтобы сделать наш интерфейс командной строки более дружественным и более «современным», мы можем добавить режим мастера, который будет направлять пользователей по шагам. Этот мастер объясняет, что будет делать эта программа, спрашивает предпочитаемый язык и перечисляет имена модулей вместе с их последними номерами версий.
Сначала мы начнем с установки следующих модулей:
npm i figlet axios inquier loading-cli --save
Короче говоря, Inquier позволяет нам отображать списки выбора и входные данные. Figlet генерирует причудливый текст ASCII, loading-cli и colors-cli, чтобы добавить немного цвета и счетчика в наш CLI. Мы также получим версии пакетов через конечную точку npm. Таким образом, мы будем использовать axios (что, как мне кажется, удобнее), но можно и простой выборкой.
Теперь мы можем добавить новую команду «мастер», не указывая аргументов, и позволить программе вести нас шаг за шагом.
Итак, наш окончательный код будет выглядеть так:
Прохладный! Наша программа готова. Если мы сначала передадим аргумент «мастера», например rncli wizard, он выведет список наших модулей и их последних версий и спросит нас, хотим ли мы продолжить. Если мы этого не сделаем, он немедленно выйдет. Затем он запросит язык и каталог. После получения этой информации он начнет установку модулей, как мы это делали ранее в простом CLI.
Издательский
Завершающий этап — публикация. Перед отправкой нашего пакета в npm убедитесь, что в вашем package.json есть эти две записи:
"main": "index.js",
"bin": {"rncli": "index.js"},
Не запутайтесь здесь с именем bin. Имя пакета будет отображаться в npm, а не в имени CLI. Если ваше имя занято, вы можете изменить это имя на другое.
Наконец, войдите в npm и опубликуйте свой пакет:
npm login npm publish
Вот и все! Ваш CLI публикуется публично на npm. Теперь вы можете быстро протестировать с помощью npx rncli wizard и проверить, все ли работает.
Заключение
В этой статье мы кратко вошли в мир CLI и узнали, как создать командную программу в Node.js. Это не ограничивается только React Native. Вы можете использовать этот пример и изменить его для любого языка, который использует npm, например Angular, React.js или чистый Node.js. Вы можете улучшить его, добавив структуру каталогов или сделать терминал более привлекательным, добавив цвета и т. д.
Я надеюсь, что это будет полезно для вас. Если у вас есть какие-либо комментарии, пожалуйста, дайте мне знать!
Удачного кодирования!
