почему

Я опубликовал статью в январе:Создайте библиотеку компонентов Vue с автоматическим управлением версиями с нуля., представляет собой статью типа todo о создании библиотеки компонентов, включая сборку, настройку, упаковку и публикацию библиотеки компонентов. Поскольку интерфейсная инфраструктура компании становится все более и более совершенной, мы будем производить все больше и больше таких интерфейсных библиотек, и их будет все больше и больше: библиотека компонентов, библиотека js, библиотека css, каждая библиотека должна начинаться с нуля. Очевидно, что создавать и настраивать пакет и выпускать такую ​​повторяющуюся работу неразумно, ведь лень — основная производительная сила, так есть ли хороший способ решить эту проблему? Так что я подумалNode Cli, установка и обновление просты, процесс унифицирован и стандартизирован, а последующие функции могут раскрыть большой потенциал, который заменяет повторяющуюся работу и позволяет учащимся в группе переднего плана иметь больше времени, чтобы сосредоточиться на кодировании и крик действительно ароматный.

Цель

Прежде чем привлечь четкие цели могут быть достигнуты эффективно избегать половины: кто я? Где я? Я делаю? Вопрос, давайте посмотрим на какие конкретные проблемы нам нужно обратиться к CLI, я упомянул несколько проблем, которые я встречал в работе:

1. Сжимайте продукты сборки в соответствии с правилами: Помимо загрузки библиотеки в npm, библиотеку также необходимо загрузить на сервер статических ресурсов, чтобы некоторые старые проекты можно было импортировать напрямую через теги. zip для загрузки в соответствии с определенными правилами пути (аналогично /lib/front/projectName/version/xxxx.umd.js), поэтому каждый проект должен разработать набор логики для удаления zip-пакета перед упаковкой и создания zip-пакета. после завершения пакета.
2. контроль версий:Создайте библиотеку компонентов Vue с автоматическим управлением версиями с нуля.Представленные вам в проекте использованияnpm versionКонтроль версий проекта, каждый проект надо делать копию, когда копирую вторую копию, то не выношу и приходится выдергивать.
3. Конфигурация релиза: Каждому проекту нужна конфигурация релиза для выполнения на платформе релиза.Возможно, потребуется вручную изменить номер версии в нем, чтобы избежать сбоя релиза.
4. TAG: Мы можем перезаписать файл, когда мы загружаем статический сервер ресурсов. Это имеет преимущества и недостатки. Преимущество состоит в том, что библиотека очень эффективна в публикации, и недостаток в том, что он недостаточно безопасен. Механизм необходим, чтобы избежать Риски и автоматически тег нами, меньше или равны тегу. Просто обновите версию библиотеки, честно и обновите версию пудинга.
5. Инициализируйте библиотеку и добавьте компоненты шаблона: каждый раз, когда вы создаете библиотеку, вам приходится с нуля настраивать веб-пакет, структуру проекта, tsconfig, lint и т. д. Хотя вы можете скопировать существующую библиотеку для обрезки, как cli может напрямую генерировать аромат .

Подводя итог, нашNode CliНеобходимо решить: сжать продукты сборки, автоматизировать контроль версий, получить стандартную конфигурацию выпуска, автоматически пометить, загрузить шаблон библиотеки или шаблон компонента.

Выше приведены проблемы, с которыми я столкнулся.Студентам лучше всего объединить свои собственные бизнес-сценарии и увидетьNode CliМожете ли вы сделать некоторые повторяющиеся задачи для вас?

Начало

Основные рамки для построения

Node CliПринцип заключается в использованииnpm i -g cli-nameПосле установки упакуйте его в глобальные node_modules.После выполнения команды в командной строке система выполнит соответствующий скрипт в соответствии с переменными окружения node.

Добавьте в package.json проекта cli:

{
    ...
    "bin": {
        "mycli": "./bin/mycli.js"
    }
    ...
}

Таким образом, когда другие учащиеся установят его глобально, они смогут напрямую использовать команду mycli для выполнения сценария mycli.js.

Мы можем использовать его при локальной разработкеnpm linkСвяжите проект с папкой пакета, чтобы его было легче отлаживать, не пересобирая каждый раз.

Затем взгляните на mycli.js, добавьте в начало файла#!/usr/bin/env node, цель состоит в том, чтобы решить проблему различных путей пользователя к узлу и позволить системе динамически находить узел для выполнения скрипта.

Здесь мы должны полагаться на некоторые отличные сторонние пакеты, здесь я выбираюCommander.js, который является полным решением для интерфейса командной строки node.js.

#!/usr/bin/env node

const { program } = require('commander')

const { resolve } = require('path')

const res = (command) => resolve(__dirname, '../src/', command) // 读取脚本路径

const version = require('../package.json').version

program.version(version, '-v, --version') // 执行mycli -v 或 mycli --version的时候输出当前版本号

program.command('init').description('init lib').action(() => { // init脚本的描述与执行
    require(res('init'))
})

program.command('build').description('build lib').action(() => { // build脚本的描述与执行
    require(res('build'))
})

program.command('release').description('release lib').action(() => { // release脚本的描述与执行
    require(res('release'))
})

program.parse(process.argv) // 处理输出参数

Итак, основная структура cli настроена, и следующим шагом будет расширение ее функций.

Богатые возможности

После все большего количества функций, наш cli сам тоже может столкнуться с проблемой огромного объема и сложной структуры кода.В это время мы можем самостоятельно упаковать отдельные функции в пакеты npm, и внедрить эти пакеты из cli. можно обратиться к статье технической группы облачной музыки:Изучение подключаемых модулей для инструментов Node CLI(Учиться у больших парней).

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

1. init: загрузить шаблон библиотеки или шаблон компонента
2. build: сжимайте артефакты сборки, автоматизируйте контроль версий.
3. выпуск: извлеките стандартную конфигурацию выпуска, автоматически пометьте

Сначала порекомендуйте несколько сторонних библиотек, которые могут помочь нам реализовать функции лучше и быстрее:

Функция	иллюстрировать
request	http-модуль
inquirer	Мощный инструмент взаимодействия с пользователем через командную строку, который также используется vue-cli.
shelljs	Выполнить команду оболочки в скрипте узла
chalk	Избавьтесь от черно-белого cli и добавьте немного цвета в вывод.
ora	Схема хризантемы командной строки, мы не хотим, чтобы пользователи думали, что кли зависает при выполнении трудоемких операций
compressing	используется для сжатия
node-emoji	Командная строка Emoji добавить некоторые добавить веселье (???)

init

Решение проблем: загрузка шаблонов библиотек и загрузка шаблонов компонентов

Мы можем положить шаблон предустановленной библиотеки в наш склад cli, или положить его в специальное хранилище шаблонов, а затем получить и загрузить его через API gitlab.Перед использованием API gitlab нам нужно перейти в настройки учетной записи, чтобы получить один A private_token, занесите этот параметр в gitlab для аутентификации при вызове API, а затем используйте API для рекурсивного чтения файлов в хранилище gitlab, записи соответствующих файлов в текущую директорию и завершения загрузки шаблона библиотеки.В течение этого периода , вы можете использовать Ora для создания диаграмм хризантем и использовать node-emoji, чтобы добавить несколько зеленых галочек, чтобы улучшить взаимодействие с пользователем.

build

Решение проблем: сжатые артефакты сборки, автоматизированный контроль версий

Используя inquirer для взаимодействия с пользователями, вы можете спросить пользователя: какую стратегию обновления версии npm использовать? Тип упакованного товара? имя библиотеки? Файл записи выбора библиотеки с несколькими записями? выходной путь пакета? Необязательный сценарий выполнения?

В cli мы можем пройтиrequire(resolve('pathTo/package.json'))Чтобы прочитать package.json пользователя, вы можете получить имя, версию и другую информацию о проекте пользователя.Эту информацию можно использовать в качестве значения по умолчанию вопроса спрашивающего.В конце концов, опыт слишком плохой, если пользователь требуется чтобы вводить каждый раз, когда пакет упакован.Введите пояс искры полностью.Молния, безусловно, самая крутая. Теперь, когда можно получить пользовательский package.json, мы можем сделать некоторые согласованные конфигурации.Например, объект config.cli в пользовательском package.json является объектом параметра, специально читаемым и используемым нашим cli, и пользователь может написать некоторые настройки настроенная конфигурация.

Решение, которое я практикую в проекте, состоит в том, чтобы использовать информацию о проекте, полученную запросчиком, для объединения команд упаковки vue или webpack (компания в основном использует vue), таких как создание библиотеки компонентов vue, которая в конечном итоге будет выполнена.

npx vue-cli-service build --target lib --name name --dest path

сборка веб-пакета будет выполнена

webpack --output-path path

Помимо базовой команды сборки, пользовательскую конфигурацию можно прочитать из согласованного файла config.cli.Например, пользователи могут добавлять параметры env, если им необходимо упаковывать в разных средах.

После упаковки, в соответствии с названием, версией и другой информацией пользовательского package.json, поместите продукт сборки в/lib/front/projectName/version/xxxx.umd.jsЗатем используйте сжатие, чтобы сжать его в zip-пакет.

release

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

Загрузка стандартной конфигурации релиза аналогична инициализации: загрузка стандартной конфигурации, которую можно изменить и записать в соответствии с пользовательским package.json.

Автоматическая пометка: я предоставляю необязательный тег параметра для команды выпуска, который можно прочитать через process.argv. После прочтения параметра тега используйте API gitlab, чтобы пометить соответствующую ветку, и последующие сборки и выпуски могут сначала проверить этот тег. version и версия package.json пользователя, напомните пользователям не забыть обновить версию.

...

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

Суммировать

В этой статье представлены сценарии использования и базовая структура Node Cli, а также представлены идеи для реализации нескольких функций.

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

Я suhangdev, добро пожаловать, чтобы общаться со мной по темам, связанным с интерфейсом, по электронной почте 17816876697@163.com, если статья полезна для вас, пожалуйста, поставьте лайк и поддержите, спасибо!