Всем привет, меня зовут Делайк, и сегодня я представляю вам wp2vite.
wp2vite
Прежде всего, позвольте мне представить главного героя сегодняшнего дня, который представляет собой инструмент командной строки и инструмент автоматизации.
Роль этого инструмента состоит в том, чтобы позволить проектам, использующим webpack, разрабатывать и строить, чтобы поддерживать использование vite для разработки и сборки одним щелчком мыши.
если кто не знаетwebpackа такжеviteЧто они собой представляют, вы можете нажать на соответствующее название, чтобы перейти на их официальный сайт, чтобы увидеть.
Однако для фронтендера вы знаете webpack по умолчанию; если вы не знаете vite, рекомендуется узнать о нем, который известен как инструмент разработки и построения фронтенда следующего поколения.
Я написал статью некоторое время назадСтатья о разборе и попытке vite, В конце статьи я вкратце объяснила: "Вите, действительно ароматный".
установка и использование
Что касается установки wp2vite, она аналогична установке других инструментов командной строки:
npm install -g wp2vite
or
yarn global add wp2vite
Если пользоваться, то на самом деле очень просто, очень простой инструмент, файлов конфигурации не так уж и много, и командная строка не такая длинная;
// 进到你的使用webpack开发和构建的项目的目录
cd your_workspace/your_project
// 执行wp2vite的命令行
wp2vite
or
wp2vite init
После выполнения команды WP2Vite установите зависимости и запустите проекты.
// 安装依赖
npm install
// 启动项目
npm run dev // 如果原先你的项目有dev script，请执行下面的命令
or
npm run vite-start
О реализации
Первоначальное намерение реализовать этот инструмент командной строки фактически получено изvite-content-pro, положитьконцентрат проекта webpack-proВ процессе перехода на проект, поддерживающий vite, это занимает много времени и сил;
Как начинающий программист, я могу делать что-то с помощью командной строки и никогда не копировать и не вставлять это вручную~
Откройте все, получите конфигурацию веб-пакета
В зависимости от проекта конфигурация вебпака тоже отличается.Для реактивного проекта есть фактически два типа, благодаря богатым возможностям сообщества строить колеса:
- create-react-app: для проектов, созданных с помощью create-react-app, которое было извлечено, файл конфигурации отображается в config/webpack.config.js;
- create-реагировать-приложение: для приложения create-реагировать без извлечения файл конфигурации находится в node_modules/react-scripts/config/webpack.config.js;
- react-app-rewired: готовясь к работе, я обнаружил, что есть много проектов, которые используют это для создания проектов.Этот файл конфигурации имеет файл конфигурации /config-overrides.js;
Вышеупомянутое относится к проектам реагирования, созданным структурой спецификации; для vue, благодаря популярности корзины семейства vue, в основном есть только одна:
- vue-cli: для проектов, созданных с его помощью, файл конфигурации webpack находится в /node_modules/@vue/cli-service/webpack.config.js.
Для других типов проектов webpack пока нет детального деления, но эта часть тоже поддерживается, нужно передать расположение конфигурационного файла webpack.
получить прокси-прокси
Для проекта реагирования большинство прокси хранятся в setupProxy.js, а wp2vite обрабатывает этот прокси и копирует настроенный здесь прокси непосредственно в прокси vite;
Мы использовали require.cache nodejs, чтобы получить эту часть прокси, конечно, мы также столкнулись с множеством ям.
Для проекта vue, если серьезно, он находится в файле vue.config.js, который легче читать.
получить псевдоним - псевдоним
Что касается части псевдонимов, некоторые псевдонимы находятся в файле конфигурации веб-пакета, а некоторые на самом деле в tsconfig.json/jsconfig.json; Мы объединим данные этих двух частей и подытожим псевдоним vite.
Дополнительный плагин-плагин
На самом деле плагинов, предоставляемых vite официально, относительно немного, но людей, которые строят колеса, очень много, а плагинов еще много.Конечно, с вебпаком не сравнится.Он живет долго время!
Для реактивного проекта файл синтаксиса jsx, заканчивающийся на js, не будет анализироваться vite с jsx-загрузчиком, мы предоставляемvite-plugin-react-js-supportвосполнить недостатки этой части; Кроме того, мы автоматически внедрим официальныйreact-refreshплагин
Для проектов vue мы будем вводить только один@vitejs/plugin-vue; Этот плагин основан на однофайловом компоненте Vue.@vue/compiler-sfc, будут автоматически добавлены в зависимости.
Для всех проектов мы внедряем плагины режима совместимости@vitejs/plugin-legacy, и даст базовую конфигурацию для облегчения совместимой обработки младших браузеров.
самодостаточный
На самом деле есть и другие части работы, так что не буду вдаваться в подробности.
Есть много вещей, которые делают инструменты конвертации, но могут быть разные проблемы для разных проектов, запомните одно предложениеПсевдоним - отличный способ вите.Если не можете найти или найдете не то место, от которого зависите, добавьте алиас.;
вещи в пути
- Преобразование проектов ниже babel7 немного проблематично и все еще оптимизируется;
- В настоящее время поддерживается только преобразование проектов react и vue, и реакция работает лучше, другие проекты пока не поддерживаются и находятся в разработке;
- Есть только более 10 проектов для тестирования конверсии, но все они были успешными и нуждаются в дальнейшем тестировании;
Добро пожаловать в опыт wp2vite, если у вас есть какие-либо вопросы во время использования, пожалуйста, свяжитесь с нами; конечно, если вы хотитеУчаствовать во вкладе, мы также очень рады, если вы обнаружите ошибки во время использования, добро пожаловатьсообщить об ошибкеДайте нам, мы решим это как можно скорее.