Vite 2 + практика реагирования

Vite
Vite 2 + практика реагирования

предисловие

ViteЭто, несомненно, один из самых горячих проектов на данный момент, с выходом версии 2.0 после Праздника Весны все больше и больше разработчиков стали обращать внимание на этот проект. это так называемоеИнструменты сборки интерфейса нового поколенияСамое большое впечатление на нас это то, чтобыстро. ежедневный медленный запуск проекта иHMRпытки, сViteПосле этого не будь слишком крутым. несмотря на то чтоViteК фреймворку отношения не имеет, но тем больше приложений все равноVueработает, тоReactМожно ли использовать проект гладко, эти две недели после работы, он начнетсяVite 2.0 + Reactпытаться. Конечно, есть много ям, таких какAntdРяд проблем, вызванных введением, как писать псевдонимы, как настраивать агенты, интегрироватьahooksПодождите, надеюсь, это поможет использоватьReactхочу использовать сноваViteСтуденты, которые повышают эффективность развития, избегают обходных путей. Конечно, мы также можем интуитивно понять из процесса практики.ViteПринцип расфасовки и реальное ощущение исполнения.

Адрес исходного кода этой статьи находится по адресуvite-playgrounds, если вы обнаружите проблемы в чтении, добро пожаловать пр.

также участвовал вДокументация на китайском языкеМы приветствуем заинтересованных студентов для оптимизации и исправления переводческой работы.

Кроме того, сделайте предварительный просмотр.Во время Весеннего фестиваля я нашел время, чтобы принять участие.особенноПрямая трансляция шоу Open Source Friday на Twitch.Инструменты внешнего интерфейса нового поколения с ViteJS ✨ Пятница с открытым исходным кодом ✨работа над переводом субтитров, особенно в видеоViteПодробное описание различных функций , Дашен онлайн кодирование, онлайн отладка, Дагу диссwebpackи правильноViteфилософское мышление. Общая продолжительность ролика один час.После возобновления работы во время праздника сил вложено не много.Предполагается, что он выйдет на следующей неделе, так что следите за обновлениями.

Хорошо, пойдем со мной, шаг за шагомVite 2 + ReactПрактическое путешествие.

Инициализировать проект

$ npm init @vitejs/app

Выберите название проекта и шаблон:

Установка и запуск в зависимости от:

$ cd vite-react
$ npm install
$ npm run dev

Использование контрастаwebpackстроитьReactсреду можно увидеть с помощьюViteпосле добавленияBabel,React,webpack-dev-serverРабота может быть опущена:

Добавить яму для скалолазания

Яма для скалолазания в стиле

$ npm install antd

существуетApp.jsxвведен вantd:

import { DatePicker } from ‘antd’;

После сохранения страницаreload, обратите внимание, что неHMR,В настоящее времяAntdбыло введено:

Затем мы добавляемDatePicker, стилей не найдено:

В соответствии с рекомендациями по документации на официальном веб-сайте antd, импортCSSстиль, чуть лучше, но все равно не нормально:

попробуй импортироватьLess, сообщите об ошибке напрямую:

ViteВстроенная поддержкаLess, но требует ручной установки пользователемLess, см. официальную документацию сайта:Features # CSS Pre-processors

$ npm install -D less

После установки и перезапуска появилась новая ошибка:

Знакомый вкус, даAntdОшибка правильная. Вы можете увидеть это в сообщении об ошибкеIssue, я не читал этот выпуск два года и обнаружил, что этот выпуск становится все больше и больше, потому что в периодless-loaderОбновление принесло новые ямы. Решение сводится кwebpackизless-loaderоткрыть вjavascriptEnabled, видеть этоCommit

затем вViteкак это сделать вViteтакже открытьCSSКонфигурация препроцессора, см. подробностиОфициальная документация сайта,существуетvite.config.jsДобавьте в файл следующую конфигурацию:

// vite.config.js
...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    }
  }
...

Наконец, стиль нормальный:

Об использовании полной суммыAntdПредупреждающий анализ пакетов

Еще один момент, на который следует обратить внимание, это то, что при открытии окна отладки снова появляется другое знакомое предупреждение.AntdСтуденты, которые разработали, знакомы с:

Исходный проект, используемыйwebpack,существуетwebpack@2После этого поддержитеESмодульныйtree shaking, это предупреждение не появляется.

пока вVite, мы можем просмотретьофициальная документация,ViteбудуnpmЗависимости предварительно созданы и переписаны, чтобы быть законнымиurl. В этом проектеViteБудуAntdПредварительно построенный/node_moduls/.viteпапка и будетurlпереписать как/node_modules/.vite/antd.js?v=d2a18218, поэтому появляется это предупреждение.

Но не волнуйтесь, он по-прежнему будет работать в производственном пакете.tree shaking. Даже если среда разработки вводит полный объемAntdМешок,Viteна основеesbuildСкорость предварительной компиляции очень высока, и браузер кэширует пакет позже, и опыт разработки не упадет, а возрастет, поэтому это предупреждение можно игнорировать.

сменить тему

Давайте попробуем изменить тему еще раз, чтобы увидеть, работает ли это:

Следуйте инструкциям на официальном сайте, чтобы использоватьlessизmodifyVarпокрыватьlessпеременная, чтобы достичь цели изменения темы,Пользовательские темы - дизайн муравьяа такжеwebpackнастроен вless-loaderразные вViteгораздо проще вlessизoptionВы можете настроить его в:

// vite.config.js
...
      less: {
        javascriptEnabled: true,
        modifyVars: {
          "primary-color": "#1DA57A",
          "link-color": "#1DA57A",
          "border-radius-base": "2px",
        },
      },
...

Вы можете видеть, что стиль вступает в силу:

Согласно этой идее, нам относительно просто изменить темную тему:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import { getThemeVariables } from "antd/dist/theme";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          ...getThemeVariables({
            dark: true,
          }),
          ...{
            "primary-color": "#1DA57A",
            "link-color": "#1DA57A",
            "border-radius-base": "2px",
          },
        },
      },
    },
  },
});

Нет проблем, тёмная тема работает:

Настройте прокси, к которому можно получить доступ через RESTFul

обратитесь на официальный сайтконфигурация server.proxy, здесь следует обратить особое вниманиеproxyпишется так же, как мы использовали раньшеwebpack-dev-serverвнутриproxyКонфигурация немного отличается, а именно:

// vite.config.js
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

В это время мы посещаемhttp://localhost:3000/api/users, вы можете получить доступ к данным на jsonplaceholder.typicode.com/users

Интеграция React-маршрутизатора

Добавим меню и маршрутизацию, сначала представимReact Router:

$ npm i react-router-dom

новыйindex.jsxдокумент:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import App from "./App";

export default function Index() {
  return (
    <Router>
      <Switch>
        <Route path="/app">
          <App />
        </Route>
      </Switch>
    </Router>
  );
}

Исправлятьmain.jsxфайл, будетAppзаменитьIndex:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
- import App from './App'
+ import Index from './index'

ReactDOM.render(
  <React.StrictMode>
-   <App />
+   <Index />
  </React.StrictMode>,
  document.getElementById('root')
)

посетить в это времяhttp://localhost:3000/appможет получить доступ кAppСтраница, маршрутизация вступает в силу.

Добавим еще одно меню, новоеLayout.jsxдокумент:

import React from "react";
import { Menu } from "antd";
import { Link } from "react-router-dom";

export default function Layout() {
  return (
    <Menu selectedKeys="App" mode="horizontal">
      <Menu.Item key="App">
        <Link to="/app">App</Link>
      </Menu.Item>
    </Menu>
  );
}

Наконец вindex.jsxпредставлятьLayoutфайл, пожалуйста, обратитесь к описанному выше процессу для деталейэто обязательство

Обратите внимание на использование псевдонимов — критическое изменение

УведомлениеVite@2изUserConfig.aliasУстарело, используйте вместо этогоresolve.aliasАльтернатива, написанная также иVite@1разные, см.Официальная документация веб-сайта - псевдоним разрешенияа такжедокументация по подключаемым модулям

// vite.config.js
...
import path from "path";
...
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: path.resolve(__dirname, "src"),
      },
    ],
  },

...

Затем мы корректируем структуру файлов и используем псевдонимы вместо относительных путей, см. подробностиэто Совершить

Страница со списком пользователей

Далее мы разрабатываем список пользователей, имитирующий реальный интерфейс, см.umi@2 + два, полное приложение CURD для управления пользователямиШаг

Страница нового пользователя

Добавить кUserМаршруты и страницы, см. подробностиэто обязательство.

посетить в это времяhttp://localhost:3000/userчтобы увидеть только что добавленныеUserстраница вверх:

Запросить интерфейс для подъема на яму

Запросить данные интерфейса, использовать здесьahooksизuse-request

используется здесьnpm 7Установка сообщит об ошибке:

потому чтоnpm 7установится автоматическиpeerDependency,а такжеahooksизpeerDependencyдаreact@^16.8.6, в результате чегоreact@17Ошибка конфликта версий, эта проблема уже вэтот прТут исправлено, но пакета пока нет, временно б/уyarnЧтобы обойти эту проблему:

$ yarn add @ahooksjs/use-request

Доступен сейчасuse-requestпросить/api/usersПолучить информацию о пользователе:


  const { data, error, loading } = useRequest('/api/users')

Данные дисплея

После заполнения ямы, запрошенной интерфейсом, можно отобразить информацию о пользователе. Добавим таблицу для отображения информации о пользователе, подробнее см.это обязательство.

use-requestвернулсяloading, а затем объединитьantd tableкомпонентloading,иметь дело сloadingЭто очень удобно:

На этом страница, имитирующая интерфейс, запрашивающий данные, завершена.

О яме пейджинга

Поскольку наш интерфейс использует аналоговый интерфейс, пейджинговая информацияResponse Headersвнутри, просьбаЗаполнитель JSON. Та же партия .com/users?_Afraid…можно увидеть:

просмотреноahooksизAPI, обнаружил, что нет правильногоResponse Headersфункция обработки см.исходный кодВыяснил, что нет никакого способа получить егоHeadersЗначение в:

Общая информация о подкачке реального интерфейса будет вResponse Body, данные подкачки легко обрабатывать, и эта яма не требует времени для заполнения.

What Else

Конечно это не конец, но в остальном процесс более условен, перечислим следующее:

  • интегрированныйRedux, или используйте упакованныйdva.js
  • Обычный маршрут
  • все еще помнюbabel-plugin-import, вVite, если вы хотите, чтобы стили загружались по запросу, вы можете попробовать этот плагин:vite-plugin-style-import, который теперь поддерживаетсяVite 2охватывать
  • хочу использоватьTypeScript,можно использовать@vitejs/create-appизreact-tsшаблон, а затем выполните шаги, описанные в этой статье, чтобы настроить
  • Production Mode,SSR, вы можете обратиться к официальной конфигурации сайта, вы можете обсудить, с какими ямами вы сталкиваетесь
Категории