Привет всем, вот сок, я был занят обновлением структуры компании в начале года, и написание статьи было отложено, мне очень жаль. Я считаю, что все знают название, да! Все наши проекты используютViteрефакторинг, удаление громоздкогоwebpack, чтобы встретить новую эру развития. Я записал все ямы, с которыми мы столкнулись во время реконструкции, и отдал сообществу, надеюсь, что те, кто читал эту статью, не будут наступать на ямы повторно.
Почему выбирают Вите?
видел меня раньшестатьяДетская обувь должна знать, я читалvite1.xИсходники версии, если честно на тот моментviteбольше похоже на экспериментdemoформы, от производственной среды еще далеко, но я все еще уделяю внимание самому проекту, пока2021.2.17,viteопубликовано2.0.0-release
Сам проект такжеRollupБыло проведено углубленное сотрудничество, был проведен рефакторинг базового кода и внедрен механизм подключаемых модулей.
Viteне только дляVueОн стал настоящим кросс-фреймовым сервером разработки.
Увидев это, я думаю, что пора! С ростом количества предприятий эффективность локальной разработки проекта становится все ниже и ниже, сохраняйте код,webpackНа упаковку и обновление уходит несколько секунд, что действительно невыносимо. Скорость онлайн-упаковки также становится все медленнее и медленнее, что серьезно влияет на эффективность итерации!ViteПросто чтобы решить эти болевые точки, чтобы легче справиться с будущим бизнесом, мы решили использоватьViteРефакторинг всего проекта.
Рекорд пит-пита
Но идеалы прекрасны, а реальность бьет меня по лицу, потому чтоViteЭкосистема еще не поднялась, и большинство проблем еще нужно избегать самих себя.Вот некоторые из наиболее очевидных ям, с которыми мы столкнулись во время реконструкции нашего проекта.
Uncaught ReferenceError: require is not defined
проблема вызывает
Эта проблема должна быть одной из самых распространенных проблем, потому чтоViteполностью зависит отESMВрожденная способность, то есть он знает толькоimport,потому чтоViteполагатьсяscriptизmoduleАтрибуты. Наш код в конечном итоге будет отправлен в браузер для выполнения,requireдаcjsКлючевое слово, сама среда браузера не определяет этот метод, и естественно сообщается об ошибке. здесь иwebpackРазные,webpackПеред отправкой файла в браузер он будет предварительно упакован.requireПреобразован в метод, совместимый с браузером.
Решение
В настоящее время нет особенно хорошего способа, если он полезен в модуле, написанном вамиrequireключевое слово, нужно заменить наimport, но если это сторонний модуль, если он используется в пакетеrequireРешения может не быть. Пакеты, встречающиеся в текущем проекте, включаютreact-intl,bizchartsПодождите, если вы также используете их в своем проекте, вы можете попробовать найти пакет для замены.
Кстати,
antdИмпорт стилей не работает сcss.jsИмпорт, потому что он используется в немrequireкавычки ключевых словlessфайл, браузер также не сможет.
Методы, связанные с узлом, недоступны
проблема вызывает
Это также связано с тем, что он отправляется прямо в браузер без предварительной обработки, такой какprocess,eventЭтиnodeОбъекты не могут найти определение в браузере.
Решение
Можно сделать с помощью совместимых с браузером пакетов сообщества.polyfill, в настоящее время используется в основном в авторском проектеprocess,event,processМожно использоватьprocess-es6делай совместимые.
import process from 'process-es6/browser.js'
//浏览器里赋值给 window
global.process = process
eventв состоянии пройтиeventsЧтобы быть совместимым, просто установите его, никаких дополнительных настроек не требуется.
xxx does not provide an export named 'xxx'
проблема вызывает
Большинство сторонних пакетовcjsЭкспортируется, то есть существует только один экспортный порт, напримерaxios,jquery,lodashи т. д., они экспортируются вот так.
module.exports = require('./xxx');
Очевидно, что это не может бытьViteвыявлено, потому чтоViteтолько поддержкаESMМетод экспорта этой части стороннего пакета должен быть совместимым.
Решение
К счастью, официальное решение было предоставлено, обратитесь к этому времениissue.viteConfigпредоставлено вoptimizeDepsпараметры, специально для обработки этихcjsэкспортированный пакет, чтобы он сталESMэкспорт, вот так.
//viteConfig.js
...
optimizeDeps: {
include: ['axios','jquery','lodash']
},
После добавления ошибка устранена.
Failed to resolve entry for package 'xxx'
проблема вызывает
Некоторые сторонние пакетыpackage.jsonНеверное местоположение экспорта, в результате чегоViteПри поиске произошла ошибка.
Решение
пройти черезviteConfigизresolveПараметры, заставить путь заменить правильный адрес.
//viteConfig.js
...
resolve: {
alias: [
{
find: 'intl-locales-supported',
replacement: path.resolve('node_modules/intl-locales-supported/src/index.ts')
}
]
}
Проблема с каталогом статических ресурсов
проблема вызывает
ViteСтатический каталог по умолчаниюpublic, если вам нужно определить другие каталоги, это не сработает.
Решение
пройти черезviteConfigизpublicDirпараметр, измените статический каталог на нужный вам каталог.
//viteConfig.js
...
publicDir: 'static',
alias '@' to path.resolve(__dirname, './src') is not working
проблема вызывает
из-заViteуже использован@Чтобы выполнить импорт модуля, если вы используете@Псевдонимы могут быть проблематичными при использовании с абсолютными путями.
Решение
добавив еще один/избегать@По поводу конфликта см.issue
// vite.config.js
module.exports = {
alias: {
'/@/': path.resolve(__dirname, './src')
}
}
совместимость
ViteПо умолчанию используется собственная возможность модуля импорта браузера, что означает, что ему нужна поддержка современных браузеров. Ниже приведены минимальные поддерживаемые версии браузера.
Chrome >=61
Firefox >=60
Safari >=11
Edge >=16
То есть эти версии ниже не поддерживаютсяmoduleатрибут, но, к счастью, наш проект не должен быть совместим с древними браузерами, такими какIEРазличные версии не нуждаются в поддержке, что является одной из причин, по которой мы решаемся на рефакторинг.
Конечно, официалы также предоставляют решения для младших версий браузеров,@vitejs/plugin-legacy, этот плагин позволяетViteУпакованный проект запускается в старом браузере, в основном с использованием@babel/preset-envконвертировать, но после его использования скорость упаковки будет значительно медленнее, что зависит от компромисса.
Предложение по замене
Я рекомендую не заменять, если один из следующих пунктов верен
- Если историческое бремя проекта велико и в нем много разного кода, стоимость замены будет высокой, и в конечном итоге он может выйти из строя.
- Если требования к совместимости браузера выше, например, необходимость совместимостиIEстарая версия.
- В настоящее время у проекта нет такого большого давления на упаковку, и эффективность местного развития в порядке.
- Используются специальные плагины,
ViteСопоставимых альтернатив не нашлось.
Если у вас нет ни одной из вышеперечисленных проблем, то я думаюViteЭто все еще стоит попробовать, опыт разработки действительно отличный, отклик в миллисекундах, и вы можете почувствовать настоящее горячее обновление. Упаковка тоже от оригинала3 минуты, вплоть до настоящего времени50s.
напиши в конце
Viteтак какwebpackЯ думаю, что будущее многообещающее. Хотя экология сейчас не идеальна, пока сообщество достаточно активно, однажды оно сможет создать свой собственный кусочек неба. Будем с нетерпением ждать этого дня~