предисловие
Чтобы сделать его более удобным для разработчиков, инструмент CLI для инициализации проектов стал стандартной конфигурацией различных интерфейсных фреймворков или решений. Проект можно инициализировать с помощью одной строки команды, и некоторые элементы конфигурации можно выбрать для достижения цели настройки, что действительно повышает эффективность разработчиков и улучшает взаимодействие с пользователем. Однако по мере увеличения количества проектов в бизнесе мы обнаружим, что их недостаточно для удовлетворения потребностей.
статус-кво
Например, Vue CLI3 предоставляет множество параметров конфигурации и поддерживает представления, а Create-React-App скрывает элементы конфигурации и дает пользователям возможность быстрого старта, ориентированную на бизнес. Но почему мы медленно чувствуем, что этого типа строительных лесов недостаточно? Поскольку роль этого типа CLI заключается в инициализации совершенно нового проекта, но помимо инициализации совершенно нового проекта существует множество ситуаций, когда необходимо повторно использовать предыдущий.шаблон проектаДа, эти шаблоны могут устанавливать некоторые пакеты, которые необходимо использовать в проекте, или включать в себя некоторые необходимые бизнес-модули, которые не могут быть удовлетворены вышеуказанным интерфейсом командной строки.
Наиболее часто используемый способ повторного использования шаблонов проектов — копирование. Копирование, несомненно, неэффективно. В этом случае мы можем извлечь набор кодов в качестве целевого шаблона проекта. После его извлечения мы можем напрямую использовать одну строку команд Установка готово, будет легче?
Еще один момент, есть много разработчиков сообществ для записи шаблонов на GitHub, мы хотим использовать время, чтобы перейти к клону Fork или делать локальные модификации. Например, высоко признанныйvue-element-adminСам разработчик шаблона не предоставляет аналогичную CLI, чтобы пользователи могли более удобно использовать этот шаблон. Разве это не будет лучше, если есть такой инструмент, который может быть инициализирован одной командой.
В заголовок
Я так много сказал, просто чтобы проиллюстрироватьMieoОтправная точка этого интерфейса командной строки и то, чего он хочет достичь. В то же время это больше для передачи идеи — встречая конкретную сцену, вы можете найти способы улучшить существующую ситуацию. Я не исследовал, есть ли другие подобные CLI, которые могут делать такие вещи. Моя отправная точка на самом деле для сценария. Я обнаружил, что каждый раз, когда я инициализирую проект React, мне нужно настроить antd в соответствии с antd, загрузить по требованию , Переопределение конфигурации по умолчанию, Redux и т.д. ряд процессов, я очень устал... Очевидно, что другие люди столкнутся с этой ситуацией, поэтому я предлагаю всем, кто нуждается, может построить свои собственные колеса, реализация очень проста, но это будет удобно. Довольно много, и друзья, которые хотят попробовать писать программы командной строки с помощью Node, также могут немного попрактиковаться.
Не мудрствуя лукаво, я изначально сам реализовал такой CLI, пока он не идеален, но его можно использовать. Далее я кратко расскажу о том, как его использовать, а затем расскажу об идеях реализации, технических деталях и вещах, которые можно будет сделать позже. Адрес проекта Mieo:github.com/seymoe/mieo,можете глянуть если интересно.Если есть идея реализации,можете разветвить или посмотреть напрямую.Объем кода не большой,но я в основном делал комментарии,что подходит для новички. Кстати, пожалуйста 🌟 ～
Как использовать
- Установить Миео
npm install -g mieo
- Посмотреть справку и версию
mieo -h
mieo -V
- Выберите шаблон и инициализируйте проект. В настоящее время существует только два шаблона, mieotpl-egg-mongoo-ts и mieotpl-react-antd-ts.
mieo init your_project_name
Реализовать идеи
Идея очень проста, нам нужна программа командной строки, которая может выполнять ряд операций с помощью команд. выполнение командной строкиinitкоманда, она запросит существующий список шаблонов, выберет шаблон, чтобы начать извлечение шаблона на локальный сервер, затем автоматически установит зависимый пакет и, наконец, подскажет, что установка прошла успешно, вы можете перейти к разработке в соответствии с соответствующей командой шаблона.
Технические подробности
запускаемый файл
за нашихmieoКоманду можно выполнить в командной строке, тогда нам нужен исполняемый файл, который используется в системах Unix.#!/usr/bin/env nodeЧтобы отметить, у Windows могут быть проблемы с совместимостью, не тестировалось, если вам интересно, вы можете попробовать это в Power Shell. Мы создалиmieoфайл, затем вpackage.jsonуказано вbinопции.
"bin": {
"mieo": "./bin/mieo"
}
Таким образом, мы можем протестировать локально и выполнить его в проекте.npm link, будет создана программная ссылка, указывающая на наш проект, чтобы мы могли выполнить его в других каталогах.mieoзаказ.
получить команду
используется в проектеcommanderЭта библиотека может легко генерировать версию и справочную информацию, создаватьinitСпособ команды также очень прост.
initProgram() {
this.program = new commander.Command()
// CLI 的版本信息
this.program
.version(pkg.version)
// init 命令
this.program
.command('init <dir>')
.description('Init a project by choosing template.')
.action((dir) => initScript(this, dir))
// 提供系统参数来给 commander 解析
this.program.parse(process.argv)
}
config.json
В этом файле записан список всех шаблонов, из которых пользователи могут выбирать.
{
"list": [
{
"name": "mieotpl-egg-mongoo-ts",
"remote": "https://github.com/seymoe/mieotpl-egg-mongoo-ts.git"
}
]
}
команда инициализации
Эта команда принимает один параметр — имя папки. использовалinquirerЭта библиотека выполняет интерактивную обработку выбора пользователя, получаяconfig.jsonПосле выбора проверьте, существует ли исходный файл этого шаблона в каталоге локального кеша.Если да, сравните версию шаблона.Если версия, опубликованная онлайн, новее, чем локальная, обновите ее напрямую (оптимизация).Точка: дать выбор пользователя), если версия не меняется, скопируйте файл в кэш напрямую. Затем введите имя входящей папки и выполнитеnpm iоперации (точка оптимизации: опорная пряжа), установка завершена.
Здесь можно отметить, потому что метод сравнения шаблонаnpm view [template name] version --jsonПоэтому, чтобы избежать выравнивания, необходимо следить за тем, чтобы имя шаблона было уникальным в библиотеке NPM, например, яmieotpl-начало.
Подробнее см.исходный код
О шаблонах
На данный момент я планирую улучшить два шаблона, и добавлю их позже по мере необходимости:
- mieotpl-egg-mongoo-tsшаблон ts из eggjs и мангуста
- mieotpl-react-antd-tsНастройте шаблон версии ts реакции и antd (будет завершено)
Суммировать
В приведенной выше практике мы также можем найти некоторые моменты, которые необходимо оптимизировать:
- Когда есть разница в сравнении версий шаблона, выбор должен быть предоставлен пользователю
- При установке зависимостей пользователям должен быть предоставлен выбор между использованием npm или yarn.
- При выполнении команды вывод отсутствует и должен быть оптимизирован
- анимация загрузки
- Оптимизация процесса, например отображение дополнительной информации о шаблоне после выбора шаблона.
- Оценка того, существует ли уже папка при инициализации
Точки, подлежащие оптимизации, можно решить, но в настоящее время потребности удовлетворены для собственного использования, и основное внимание уделяется подготовке шаблонов. В общем, Mieo - это только основная практика идей. Если вам действительно нужно стать CLI общего назначения, еще многое предстоит сделать. Я считаю, что у каждого будут свои собственные идеи в процессе практики, и это настоятельно рекомендуется что ты попробуешь сам.
Эта статья была впервые опубликована вУууу. О, 7shares.com/post/5's 872…, критика и поправки приветствуются.