Переход от CRA к Vite – путь разработчика

Среда JavaScript изобилует множеством инструментов, предназначенных для оптимизации и улучшения работы разработчиков. На фоне этой яркой панорамы Vite стал маяком инноваций, привлекая внимание разработчиков по всему миру своим обещанием скорости и эффективности. Однако перенос существующего проекта с Create React App (CRA) на Вите может стать путешествием, полным неожиданных испытаний. Здесь я делюсь нашим опытом, проливаю свет на тонкости такой миграции и предоставляю идеи, которые могут облегчить ваш переход.

Первоначальная установка и конфигурация

Наша одиссея началась с добавления в наш проект @vitejs/plugin-react и vite, что потребовало удаления react-scripts > и react-app-rewired. Наша зависимость от react-app-rewired привела нас к настраиваемым конфигурациям, которые не транслировались напрямую в Vite. Это было особенно очевидно при обращении к нашим файлам JSX, традиционно с помощью расширений .js, и мы решили эту проблему, создав специальный плагин для принудительного применения расширений .jsx для файлов, содержащих JSX.< /п>

// vite.config.js snippet
optimizeDeps: {
    esbuildOptions: {
        plugins: [
            {
                name: 'load-js-files-as-jsx',
                setup(build) {
                    build.onLoad(
                        {filter: /src/.*.js$/},
                        async (args) => ({
                            loader: 'jsx',
                            contents: await fs.readFile(args.path, 'utf8'),
                        })
                    )
                },
            },
        ],
    },
},

Устранение неполадок при настройке

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

Использование SVG

Первоначальный запуск приложения выявил множество ошибок, особенно при импорте SVG. Мы быстро внедрили vite-plugin-svgr, изменив наши операторы импорта, чтобы они соответствовали разрешению модуля Vite.

// vite.config.js snippet
plugins: [
    react(),
    svgr({
        svgrOptions: {},
        include: '**/*.svg?react',
    }),
],

Псевдонимы путей и переменные среды

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

// vite.config.js snippet
resolve: {
    alias: {
        // Aliases
    },
},

Тестирование и корректировка линтинга

В Vite мы перешли с Jest на Vitest, что потребовало переименования наших тестовых файлов и дополнения к нашей конфигурации ESLint для распознавания глобальных переменных Vitest.

// .eslintrc snippet
"globals": {
    "vi": true
}

Конфигурация сборки и разработки

Каталогом сборки Vite по умолчанию является dist, что отличается от build CRA. Это потребовало обновления скрипта в нашем package.json. Более того, чтобы поддерживать рабочий процесс разработки, мы настроили запуск сервера разработки так, чтобы он попадал на определенную страницу администратора.

// package.json snippet
"dev": "vite --port 3000 --open custom-url",

Миграция модуля NPM в Vite

Переход модуля NPM с CRA на Vite привел к появлению уникальных особенностей. Мы отключили общедоступный каталог и определили основной файл записи для библиотеки. Основная точка входа пакета также была указана в package.json.

// vite.config.js snippet for NPM module
publicDir: false,
build: {
    lib: {
        entry: path.resolve(__dirname, 'src/main.jsx'),
        formats: ['es'],
        fileName: 'main',
    },
    rollupOptions: {
        external: ['react', 'react-dom', 'react/jsx-runtime'],
    },
},

Для управления CSS мы использовали vite-plugin-lib-inject-css, который эффективно разбивал файлы CSS на фрагменты, соответствующие их аналогам в JavaScript.

// vite.config.js snippet
plugins: [
    // Other plugins...
    libInjectCss(),
    // ...
],

Заключение

Миграция с CRA на Vite была далеко не тривиальной; это было свидетельством сложности, скрытой за простотой современных инструментов. Каждый шаг раскрывал новый аспект процесса сборки и развертывания, который в CRA мы считали само собой разумеющимся. Однако сокращение времени сборки, сокращение затрат на настройку и обещание более упрощенного процесса разработки, обеспечиваемого Vite, стали вескими причинами для того, чтобы отправиться в этот путь.

Путем проб и ошибок и длительного поиска в Google мы вышли на другую сторону с функциональной настройкой, более глубоким пониманием нашей цепочки инструментов и новым пониманием ремесла веб-разработки.

Ссылки

1. Сообщество разработчиков: Руководство, подробно описывающее процесс миграции с CRA на Vite, включая обновления рабочего процесса GitHub Actions и советы по оптимизации процессов разработки.

2. FreeCodeCamp: предлагает информацию об обновлении. переменные среды и устранение распространенных проблем при переходе с CRA на Vite, таких как глобальные ошибки не определены.

3. Блог Робина Вируха: Содержит подробное руководство по переходу на Vite, включая создание `vite .config.js` и обновление `index.html` с дополнительными шагами по использованию ESLint и TypeScript с Vite.

4. KingsCoder: Пошаговое руководство по преобразованию Приложение CRA для Vite с дополнительными инструкциями по шаблонам TypeScript и решениям для потенциальных ошибок установки NPM.

5. Блог Патрика Дежардена: Делится личным опытом миграции на ViteJS с TypeScript и возможностью абсолютного пути, включая настройку файла `vite.config.ts` и обработку переменных среды.

6. HackerNoon: Обсуждает, почему Vite считается лучше, чем CRA, подчеркивая более высокую скорость и эффективность объединения с Rollup.

7. HackerNoon: Описывает устаревание CRA и представляет Vite среди другие альтернативы, отмечая их преимущества в производительности и быстрое время разработки.

8. HackerNoon: Пример повышения скорости и производительность за счет перехода с Webpack на Vite, включая практический опыт и извлеченные уроки.