Говоря о расширяемости vue-cli и дизайне плагинов

JavaScript Vue.js
Говоря о расширяемости vue-cli и дизайне плагинов

Это новая серия «экспериментальных» статей, как следует из названия, «Технологические карты», в этой серии планируется анализ некоторых проектов с открытым исходным кодом, возможно, изучениеДизайн и организация, организовать их для использованиястек технологий. первый дубльvue-cliПопробуйте маленький нож, а потом решите, продолжать ли эту серию в продолжении.


Я думал о том, что мы в основном делаем с программированием? Большая часть нашей работы заключается в выборе различных инструментов/библиотек/фреймворков для привязки бизнеса Чем больше инструментов и сценариев совпадают, чем больше понятен принцип, и чем искуснее приложение, тем выше может быть наша эффективность .Это утверждение очень спорное, как и程序=算法+数据结构Мы не можем полностью выразить то же самое, что и сегодняшняя разработка программного обеспечения, что наша работа накапливает инструменты, связывая бизнес, в определенной степени самоуничижительный смысл. Но на самом деле это истинное изображение большинства программистов.

Эта серия статей на самом деле немного похожа на статьи на github.AwesomeПроекты. Эти потрясающие проектыЭкологический выставочный зал, который переполнен проектами.Из-за того, что их слишком много и отсутствует механизм скоринга, в большинстве случаев мы не можем проверить их один за другим, и трудно выбрать проекты, отвечающие потребностям (конечно, у вас есть четкая цель, а круг целей очень маленький, может пригодится).

Можно ли попробовать другой ракурс,Выберите какой-нибудь интересный проект с открытым исходным кодом и посмотрите, как применить эти инструменты и упорядоченно изложить?Для проектов с той же сценой или имитацией эталонное значение может быть больше

Я также надеюсь, что читатели будут обмениваться со мной отзывами, учиться и совершенствоваться вместе.



vue-cli

Говоря о CLI, я должен упомянутьRailsкадр, может бытьFramework предоставляет предка CLI(Конкретная история глубоко не изучена.) Rails имеет важную руководящую идеологию, т.е.соглашение о конфигурации, Он обеспечивает лучшее решение для большинства потребностей веб-приложения и использует эти соглашения по умолчанию вместо того, чтобы задавать каждую деталь в длинном файле конфигурации..

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

Многие проекты Rails были звездой в ту эпоху (слепой PHP, JSP, ASP..., подумайте о настройке различных серверов, различных XML-файлов), и многие из его шаблонов проектирования глубоко повлияли на последующие веб-фреймворки, такие как Django, Laravel и даже многие названные в честь Rails, такие как Sails, Grails.

Rails также имеет далеко идущие перспективы в разработке внешнего интерфейса, например, до nodejs сообщество Rails начинает использоватьcoffeescript + sassПредварительно скомпилированный язык для фронтенд-разработки,Asset PipelineМожно сказать, что это была самая ранняя «передовая инженерия», сTurbolinkОн может сделать так, чтобы традиционные внутренние страницы рендеринга пользовались не меньшим удобством для пользователя, чем одностраничные приложения...

То потрясение, которое тогда принесло мне Rails, до сих пор живо в моей памяти.Рубиновое китайское сообщество

Честно говоря, если бы я выучил только один язык в своей жизни, я бы выбрал Ruby, а если бы я выбрал один веб-фреймворк, то это был бы Rails.

Рекомендую всем прочитатьДоктрина Rails - Кредо RailsЭта статья внутри слова мне очень нравится:«Пока вы отпускаете свои эгоистичные личные предпочтения, вы можете пропустить ненужные мирские решения и сосредоточиться на принятии более быстрых решений там, где вещи важнее всего».. Пишите программы для людей, а не для машин.

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

На примере Webpack критикуется отвратительная и сложная конфигурация, поэтому нужны такие инструменты, как vue-cli или create-react-app.

Не работал с Ruby / Rails, Ruby China тихо написал небольшую программу (поиск WechatRuby CN), это благодарность за возвращение сообществу


Хорошо, я не мог удержаться от волны Rails, вернемся к теме.

Автор использует React в качестве основной силы для разработки, а Vue — это также проект с открытым исходным кодом, который мне очень нравится. в основном отражается в простоте API и легкости использования, документации и инструментов построения проектов (главные действующие лица сегодня).

vue-cli-ui — одна из моих мотиваций для написания этой серии статей, я использовал ее некоторое время назад.vue-cli-ui, я чувствую себя очень хорошо, он поддерживает визуальную настройку и работу с задачами, что намного более освежает, чем запуск задач в следующем проекте в терминале.Я очень хочу сделать набор наших собственных инструментов сборки, как это сделать? Изучив его исходный код, думаю, его можно записать в виде блога.

Теперь фронтенд-инженеров еще называют «инженерами по настройке веб-пакетов», что показывает, что настройка веб-пакетов — трудоемкая и трудоемкая задача (за исключением Angular), но это будет позже.parcelWheels, которые утверждают, что не имеют конфигурации, и сообщество Reactcreate-react-app, vue-cli — это проект на основе шаблонов на ранней стадии, за исключением этого столбца.

Позже vue-cli воспользовался многими преимуществами первого и сделал его больше и лучше (кажется, что vue очень хорошо справляется с этими задачами). Мы можем сравнить эти инструменты:


Vue CLI create-react-app parcel
быстрое прототипирование служба поддержки - служба поддержки
Глобальный режим Прототипирование с нулевой конфигурацией является глобальным - служба поддержки
плагин служба поддержки - Поддержка, расширенные типы файлов и вывод файлов
Расширяемость Сильная, расширенная конфигурация WEPACK через плагин Слабая, сильная конвенция, webpack нельзя настроить, можно выкинуть, а потом настроить вручную; поддержка babel-макроса; (строго говоря, его можно передатьreact-app-rewiredрасширять) Medium (можно настроить babel, postcss, Typescript); предоставляет Node API; поддерживает типы файлов расширений плагинов.
несколько страниц служба поддержки - служба поддержки
Сфера применения Первая сборка Citizen Vue. Он может поддерживать любую раму за счет дистального удлинения. Разработано для React, другие фреймворки не поддерживаются посылка — универсальный упаковщик, его конкурент — webpack
Скорость компиляции cache-loader, thread-loader для ускорения компиляции JS и TS babel-loader включает кеш Утверждается, что скорость компиляции в два раза выше, чем у веб-пакета.
Возможность обновления Поддержка обновления cli-сервиса, плагины нужно обновлять отдельно, плагины должны следовать семантическому версионированию Слишком много плагинов рискуют обновиться Поддержка сценария реакции на обновление, официальное обслуживание и строгое соглашение могут в основном гарантировать обратную совместимость. Поддержка обновления пакета-упаковщика
UI Графическое управление — одна из возможностей CLI - -

Это видно из приведенного выше контраста.vue-cli — это инструмент сборки, настолько расширяемый, что он не ограничивается Vue, его также можно использовать для сборки React и даже других интерфейсных фреймворков..

напротивcreate-react-appЭто очень самоуверенный инструмент с строгими соглашениями. Типичным примером является то, что он не имеет встроенных переводов декораторов Babel. Команда CRA считает, что языковые функции, которые устарели (или несовершенны), не должны быть перенесены в CRA; Расширить плагины для вавилон 'элегантно'babel-macro, который является спецификацией плагина Babel без конфигурации.

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

vue-cli также является «прогрессивным» cli, vue-cli предоставляет пресет по умолчанию, но не мешает вам его расширять. Интерфейс расширения vue-cli также очень лаконичен (разумен, ни больше, ни меньше), и Интерфейс управления пользовательским интерфейсом, конфигурация проекта визуального управления и плагины, пользовательский опыт отличный, планирую представить vue ui в следующей статье Единственное неудобное, что если вы злоупотребляете этой расширяемостью, установите несколько плагинов N, и есть все еще много подключаемых модулей между подключаемыми модулями. Когда есть зависимости, обновление и обслуживание также становятся бременем.



основной дизайн

Обратите внимание, что эта статья не является учебным пособием по vue-cli, лучшим учебным пособием являетсяофициальная документация.


Структура каталогов

Ниже приведена базовая структура каталогов vue-cli. Большинство крупномасштабных интерфейсных проектов используют lerna для реализации режима монорепозитория, а затем равномерно распределяют в npm. Этот режим способствует организации модулей проекта.


Отдельный слой CLI и слой обслуживания

Этот дизайн вдохновленcreate-react-appДа, уровень CLI — это всего лишь несколько основных команд, которые, как правило, не требуют частых обновлений и устанавливаются глобально, в то время как уровень Service является изменяемым, поскольку является локальной зависимостью проекта, его не следует жестко запрограммировать в CLI. обязанности CLI и Сервиса распределяются следующим образом:


  • CLI: для создания проектов и управления ими

    • Установить глобально
    • vue createСоздайте каркас проекта, скачайте последнюю версию сервиса и выберите необходимые плагины для настройки.
    • vue ui, Запустите интерфейс управления пользовательским интерфейсом.
    • Быстрое прототипирование:vue serve | vue buildНаправьте сервопривод и скомпилируйте файл Vue
    • Менеджер плагинов:vue add | vue invoke

    • локальная установка
    • Интегрировать среду сборки webpack,Сам сервис имеет только один механизм плагинов, а вся связанная со сборкой логика обеспечивается встроенными плагинами и внешними плагинами.
    • Встроенные плагины (команды): обслуживать, строить, проверять


Система плагинов

vue-cli предоставляет механизм плагинов, аналогичный babel и eslint.


плагин

Механизм плагинов является ядром vue-cli и используется для расширения возможностей Service.Service.命令и конфигурация веб-пакета предоставляются плагинами.

На самом деле сам механизм вставки не имеет технических сложностей, другими словамиПлагин на самом деле является дизайном протоколаСоглашение VUE-CLI Plug следующим образом:

  • имя: @vue/cli-plugin-*илиvue-cli-plugin-*Зависимости с этим соглашением об именах в .package.json будут распознаны как плагины vue-cli, и соглашение об именах также полезно для фильтрации на github или npm.

  • Жизненный цикл: Жизненный цикл плагина можно разделить на安装阶段а также运行阶段. vue createКоманда для создания строительных лесов проекта,vue addтак же какvue invokeКоманды установки плагинов относятся к фазе установки, а выполнение команды cli-service — к фазе выполнения.

  • Базовая структура: После выделения жизненного цикла структура плагина становится более понятной:

    .
├── README.md
├── generator.js  # generator (可选)
├── prompts.js    # prompt 文件 (可选)
├── index.js      # service 插件
└── package.json
      • генератор: генерировать файлы шаблонов на этапе установки
    • Время выполнения: index.js
      • Введите сервисную команду
      • Расширения и модификации конфигурации webpack.Vue-cli bywebpack-chainа такжеwebpack-mergeдля реализации возможности настройки веб-пакета

Простая структура плагина выглядит так:


preset

Этот пресет на самом деле отличается от концепции пресета Babel:

Пресет vue-cli — это схема создания скаффолдинга, то есть действует только наvue createсцена. Напримерvue createПо умолчанию используется пресет babel+eslint, который упрощает создание каркасов проекта.Команды могут совместно использовать пресет для создания строительных лесов..

Пресет в babel — это набор плагинов, который может единообразно хранить и управлять набором плагинов., напримерbabel-preset-react,babel-preset-env, Как упоминалось выше, если расширяемость злоупотребляют, устанавливая N нескольких плагинов, и между плагинами есть зависимости, это также станет бременем для обновления и обслуживания. удобнее для обслуживания и гармонии.Обновление в один клик.

Хотя в настоящее время vue также предоставляетvue upgradeОбновление подключаемых модулей основано на семантических соглашениях о версиях, и при наличии зависимости между подключаемыми модулями риск обновления не исключается.Особенно для командных проектов рекомендуется управлять этими подключаемыми модулями унифицированным образом для достижения дурацкие обновления. На самом деле, этот пресет в стиле Babel можно реализовать и передать через vue-plugin.


настроить

поддержка vue в package.jsonvuevue.config.jsВ конфигурации. Служба здесь может быть для основных функций и конфигурации подключаемых модулей, вы можете напрямую изменить конфигурацию веб-пакета.Также на часть поведения здания влияет переменная среды, которая может быть.env.*файл для настройки


Основной процесс

vue serveНапример:

Объект службы является основным объектом vue-cli, отвечающим за управление и применение плагинов.Все команды и конфигурации веб-пакетов существуют в виде плагинов:

Во-первых, он делится на этап конфигурации и этап эксплуатации.. На этапе настройки vue-cli загружает файл конфигурации, находит и применяет все плагины. Передайте экземпляр PluginAPI и конфигурацию проекта среде выполнения плагина, которая вводит команды (registerCommand) и расширяет конфигурацию веб-пакета (chainWebpack, configureWebpack) через PluginAPI.

На этапе выполнения команда внедрения подключаемого модуля вызывается в соответствии с именем команды, переданным пользователем. В функции реализации команды можно вызвать resolveWebpackConfig() для создания окончательной конфигурации веб-пакета. Возьмите команду serve в качестве примера: после получения webpackConfig она создаст компилятор webpack и запустит сервер разработки webpack-dev-server.


Техническая карта

  • организация
  • инструменты, связанные с командной строкой cli
    • chalk: стиль цвета шрифта командной строки
    • cli-highlight: Подсветка синтаксиса терминала, аналогичная Highlight.js.
    • cliui: Многоколоночный вывод в терминале
    • didyoumean: правильные подсказки для пользовательского ввода на основе схожести слов
    • semver: Предоставляет служебные функции, связанные с семантическими номерами версий. например, сравнить, нормализовать
    • commanderTJ пишет параметры командной строки и синтаксический анализатор аргументов, заказы на содержание детей, параметры и преобразование проверки типов, помогает группе генерировать информацию и т. Д. Простой и элегантный API
    • minimist
    • inquirer
    • oraСпиннер командной строки
    • launch-editorОткройте редактор.Откройте редактор через узел, и передняя часть может открыть вызов экспресс-интерфейса.
    • openОткрытый URL, файл, исполняемый файл
    • execaУлучшен child_process, исправлены некоторые проблемы с родным exec.
    • validate-npm-package-name: проверьте имя пакета npm, например, является ли имя созданного проекта допустимым.
    • dotenv & dotenv-expand: Загрузить конфигурацию из файла .env, переменные среды
  • Связанные с сетью
    • portfinder: получить доступные порты
    • address: Получить IP, MAC и DNS-сервер текущего хоста
  • Связанная обработка документов
    • slashПоследовательно обрабатывать разделители в путях
    • fs-extraрасширение модуля узла fs
    • globby: сопоставление с шаблоном глобуса
    • кроссплатформенная команда удаления файла rimraf
    • memfsФайловая система в памяти, совместимая с Node fs API
  • Инспекция данных
  • отладка
    • debug: это инструмент журнала отладки, который поддерживает определение необходимости вывода через переменные среды или динамические настройки; поддерживает форматирование в стиле printf.
  • алгоритм
    • hash-sum: вычисление хэш-значения
    • глубокое слияние
  • разное
    • recastПреобразователь синтаксического дерева Javascript, форматированный вывод с неразрушающей поддержкой.Js-код, используемый при распространении
    • javascript-stringify: Подобно JSON.stringify, преобразуйте объект в строку.
  • webpack
    • Определение конфигурации
      • webpack-merge: объединить объекты конфигурации webpack
      • webpack-chain: цепочка конфигурации webpack обеих библиотек является важным элементом плагина vue-cli.
    • webpack-dev-server: сервер разработки веб-пакетов, поддерживает горячую перезагрузку кода, отображение сообщений об ошибках, прокси-сервер интерфейса и т. д.
    • webpack-bundle-analyzer: анализатор пакетов webpack
  • Расширения (некоторые связанные технологические стеки)
    • http-сервер, быстро обслуживающий статические файлы
    • генератор шаблонов шлепков
    • инструмент для строительных лесов Yeoman Project
Категории