Vite 2.0 + React + Ant Design 4.0 для создания среды разработки

Хранилище с открытым исходным кодом Xinbee Mall (открытый исходный код торгового центра H5, содержащий Vue 2.x и Vue 3.x, с интерфейсом API на стороне сервера):github.com/newbee-ltd

Vue 3.x + Vant 3.x + Vue-Router 4.x Высокая имитация учетной записи WeChat с открытым исходным кодом (с API-интерфейсом сервера):GitHub.com/Nick930826/…

Адрес источника этой статьи:GitHub.com/Nick930826/…

предисловие

Недавно компания собирается сделать небольшой проект, я спросил у босса, может ли он им воспользоваться.VueНапишите, потому что компания используетReact, в основном хочу попробоватьVite.ViteЭто опять от деда, так что хочу попробоватьVueкак технологический стек. Начальник спросил меня: «Ты дерьмо ешь?» Я смутно чувствовал, что начальник ругает предков, но опровергнуть этого не мог, поэтому попытался использоватьVite + ReactФорма целой проектной полки.

Здесь все установлено по умолчанию.Nodeокружающая обстановка.

Точка знаний

ViteинициализацияReactпроект
плагин импорта маршрутизацииreact-router-dom
вводитьAnt DesignБиблиотека компонентов
настроитьAnt DesignИмпорт по требованию
настроитьAnt DesignЦвет темы
Настройка переменных среды времени пакета и времени выполненияenv
axiosВторичная упаковка
Путь к пакету статических ресурсов
ViteНекоторые конфигурации , такие как порт разработки,proxyиграет роль,aliasпсевдоним и т. д.

Начало

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

Я должен чувствовать здесь, это было еще год назадVite 1.x, через год становится2.x. Объясните две проблемы, дедушка очень положительно относится к этому проекту, и есть много неясных факторов. Но это не мешает нам его изучить, ведь это действительно вкусно и быстро. положи этоОфициальная китайская документация, вы можете посмотреть документацию, если вам интересно.

ViteОфициальный предоставляет два способа инициализации проекта, один из них:

npm init @vitejs/app

Конфигурация может быть выбрана свободно. Другой способ — напрямую использовать официально предоставленный шаблон, чтобы сгенерировать его одним щелчком мыши:

# npm 6.x
npm init @vitejs/app vite-react-app --template react

# npm 7+, 需要额外的双横线：
npm init @vitejs/app vite-react-app -- --template react

Этот учебник принимает вторую форму и генерирует проект следующим образом:

Следуйте инструкциям выше, чтобы войтиvite-react-app, после установки пакета запускаем проект:

На данный момент вы успешно построилиVite + Reactсреда разработки. 🎉 🎉 🎉

Представляем плагин маршрутизации react-router-dom

Предпочтительная установкаreact-router-dom, команда выглядит следующим образом:

npm i react-router-dom -S

в проектеsrcДобавить в каталогcontainerКаталог используется для размещения компонентов страницы, а затем вcontainerДва новых каталога добавлены вIndex иAbout, добавьте следующее:

// Index/index.jsx
import React from 'react'

export default function Index() {
  return <div>
    Index
  </div>
}

// About/index.jsx
import React from 'react'

export default function About() {
  return <div>
    About
  </div>
}

Создать новыйsrc/router/index.jsНастройте массив маршрутизации и добавьте следующее:

// router/index.js
import Index from '../container/Index'
import About from '../container/About'

const routes = [
  {
    path: "/",
    component: Index
  },
  {
    path: "/about",
    component: About
  }
];

export default routes

существуетApp.jsxИмпортируйте конфигурацию маршрутизации, чтобы переключить пути браузера и отобразить соответствующие компоненты:

// App.jsx
import React, { useState } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom"
import routes from '../src/router'
function App() {
  return <Router>
    <Switch>
      {
        routes.map(route => <Route exact key={route.path} path={route.path}>
          <route.component />
        </Route>)
      }
    </Switch>
  </Router>
}

export default App

Стартовый проектnpm run dev,Как показано ниже:

Представляем библиотеку компонентов пользовательского интерфейса Ant Design

Ant DesignОфициальный сайт не даетViteМетод конфигурации , вот мое собственное исследование. Сначала скачиваем установочный пакет:

npm i antd @ant-design/icons -S

В настоящее время последняя версия пакета значков находится отдельно, поэтому, кстати, также установлен @ant-design/icons.

После успешной установки мы сначала проверяем, можно ли ее успешно запустить с помощью метода глобального внедрения. Открытымmain.jsxДобавить стиль:

...
import 'antd/dist/antd.css'
...

назад сноваIndex/index.jsxизменить, как показано ниже:

import React from 'react'
import { Button } from 'antd'

export default function Index() {
  return <div>
    <Button type='primary'>Index</Button>
  </div>
}

Перезапустите проект, браузер выглядит следующим образом, представляя введениеAnt Design успех:

На этом этапе мы можем попытаться выполнить некоторые оптимизации.Давайте сначала посмотрим, насколько велики статические ресурсы после завершения пакета. Команда Runnpm run build ,Следующее:

На первый взгляд, форма глобального внедрения стилей, непосредственно завершающая упаковку,cssстатические ресурсы587.96k, давай попробуем按需加载стиль.

Сначала устанавливаем плагин:

npm i vite-plugin-imp -D

затем вvite.config.jsДобавьте в файл конфигурации следующее:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.less`,
        },
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
})

переустановитьlessпакет плагинов,npm i less -D, так как приведенная выше конфигурация, которую мы используемless, и нам нужно настроитьjavascriptEnabled заtrue,служба поддержкиlessв линиюJS.

Здесь мы будемmain.jsx изimport 'antd/dist/antd.css'Удалить и начать зановоnpm run dev, вы обнаружите, что стили импортируются по мере необходимости. Посмотрим на плагиныvite-plugin-impЧто сделал:

ооо, вотindex.jsxКомпонент стиля кнопки представлен отдельно в . Давайте посмотрим на размер упакованного статического ресурса:

cssПакет стилей сразу становится40.29kb, так приятно пахнет~~

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

Пользовательский цвет темы Ant Design

Во время разработки набор стилей темы будет настроен в соответствии с потребностями проекта и дизайном дизайнера (рисованием), включая такие правила, как поля, размер текста, цвет границы и так далее. наверное использовали раньшеwebpackОдноклассники в том наборе умеют играть, но теперь используютVite, нам нужно сделать следующее.

первый открытыйvite.config.js, добавьте следующий код:

...
import path from 'path'
import fs from 'fs'
import lessToJS from 'less-vars-to-js'

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './config/variables.less'), 'utf8')
)

...
css: {
  preprocessorOptions: {
    less: {
      // 支持内联 JavaScript
      javascriptEnabled: true,
      // 重写 less 变量，定制样式
      modifyVars: themeVariables
    }
  }
}
...

less-vars-to-jsбудетlessстиль, преобразованный вjsonВ виде пар ключ-значение, конечно, можно и напрямуюmodifyVarsписать после атрибутаjsonпара ключ-значение.

Затем создайте новый в корневом каталогеconfigкаталог, добавитьvariables.lessСодержание следующее:

// 自定义覆盖 =============================================================
@primary-color: green; // 全局主色
// 下面你可以各种写一些覆盖的样式，这里就简单覆盖一个主题色的样式，我们改为绿色

Повторите следующее:

Это изменит цвет темы.

Как получить переменные окружения

Я много искал, но на данный моментViteЭкология, до сих пор не могу найти нужный мне ответ, я связываю последнюю надежду сViteскладissue, действительно нашел что-то. Вот небольшое отступление: если есть какие-либо проблемы, пожалуйста, сначала решите их самостоятельно, а затем перейдите на соответствующий склад, чтобы узнать, есть ли аналогичные проблемы, которые были решены. Не ходите в группу спрашивать у начальства на каждом шагу, начальство не занято, я решу проблему за вас бесплатно?

Хорошо, давайте повернем компасы вперед. Когда мы обычно разрабатываем проекты, в основном есть три среды: среда разработки, тестовая среда и формальная среда.Эти три среды должны настроить три разных ресурса, таких как изображения, адреса интерфейсов, скрытые точки, статистика Baidu и так далее.

при упаковкеИтак, как мы упаковываем, вvite.config.jsполучить переменные среды в нем? Сначала мы модифицируемpackage.json изscriptsсвойства следующим образом:

scripts: {
	"dev": "vite --mode development",
  "build:beta": "vite build --mode beta",
  "build:release": "vite build --mode release",
  "serve": "vite preview"
}

--modeПоследний представляет собой значение переменной окружения, соответствующей каждому окружению, почему оно должно использоваться здесь?--modeШерстяная ткань? Официально значение этой переменной можно получить на странице позже.

мы вvite.config.jsпечатает так:

console.log('process:::env', process.argv)

повторный запускnpm run dev Следующее:

Последний параметр — это устанавливаемая нами переменная среды. Таким образом, мы можем получить переменные среды следующим образом:

const env = process.argv[process.argv.length - 1]

мы можемvite.config.jsконфигурацияindex.htmlВнутри префикс пути для статических ресурсов. Изменения заключаются в следующем:

...
const env = process.argv[process.argv.length - 1]
const base = config[env]
...
export default defineConfig({
	base: base.cdn
})

в корневом каталогеconfigкаталог, добавитьindex.jsфайл, добавьте следующее:

export default {
  development: {
    cdn: './',
    apiBaseUrl: '/api' // 开发环境接口请求，后用于 proxy 代理配置
  },
  beta: {
    cdn: '//s.xxx.com/vite-react-app/beta', // 测试环境 cdn 路径
    apiBaseUrl: '//www.beta.xxx.com/v1' // 测试环境接口地址
  },
  release: {
    cdn: '//s.xxx.com/vite-react-app/release', // 正式环境 cdn 路径
    apiBaseUrl: '//www.xxx.com/v1' // 正式环境接口地址
  }
}

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

npm run build:beta

Результат выглядит следующим образом:То же самое можно сказать и о формальной среде.

Время выполненияТак как же нам получить соответствующие переменные среды при запуске кода? ответimport.meta.env. мы вIndex/index.jsxРаспечатайте, чтобы знать:

import React from 'react'
import { Button } from 'antd'

export default function Index() {
  console.log('import.meta.env', import.meta.env)
  return <div>
    <Button type='primary'>Index</Button>
  </div>
}

Возвращается объект, и в объекте находятся соответствующие параметры, здесь нам нужноMODEПараметр, соответствующий атрибуту, — это текущая переменная среды, которую мы хотим.

Аксиомы вторичной упаковки

При разработке проекта сервер предоставит нам тестовый интерфейс и формальный интерфейс, здесь нам нужно настроить соответствующие переменные для динамического получения адреса запроса. Сначала мы устанавливаемaxios иqs:

npm i axios qs -S

затем вsrcновый каталогutilsКаталог, предназначенный для хранения различных инструментов и методов. существуетutilsновый подindex.js, добавьте следующий код:

import axios from 'axios'
import { message } from 'antd'
import { stringify } from 'qs'
import config from '../../config'

const MODE = import.meta.env.MODE // 环境变量

const getRequest = (method) => {
  return (url, data, options = {}) => {
    let base = config[MODE] // 获取环境变量相对应的属性值
    return axios({
      baseURL: base.apiBaseUrl, // 请求域名地址
      method,
      url,
      ...(method === 'POST'
        ? {
            data: options.string ? stringify(data) : data,
          }
        : {}),
      params: method === 'GET' ? data : options.params,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': options.string
          ? 'application/x-www-form-urlencoded'
          : 'application/json',
        ...options.headers,
      },
      withCredentials: true,
    })
      .then((res) => {
        if (typeof res.data !== 'object') {
          console.error('数据格式响应错误:', res.data)
          message.error('前方拥挤，请刷新再试')
          return Promise.reject(res)
        }

        if (res.data.errcode) {
          if (res.data.errcode == 401) {
            window.location.href = 'login' // 登录失效跳转登录页
            return
          }
          // silent 选项，错误不提示
          if (res.data.message && !options.silent)
            message.error(res.data.message)
          return Promise.reject(res.data)
        }

        return res.data
      })
      .catch((err) => {
        message.error('系统错误', 2)
        return Promise.reject(err)
      })
  }
}

export const get = getRequest('GET')

export const post = getRequest('POST')

здесь черезconfig[MODE]Получите значения атрибутов, соответствующие разработке, тестированию и официальному, чтобы получитьapiBaseUrl Переменная.

Кстати, так же добавляем прокси запроса среды разработки, открываемvite.config.js, добавьте следующие свойства:

...
export default defineConfig({
	...
	server: {
    port: 3001, // 开发环境启动的端口
    proxy: {
      '/api': {
        // 当遇到 /api 路径时，将其转换成 target 的值，这里我们为了测试，写了新蜂商城的请求地址
        target: 'http://47.99.134.126:28019/api/v1',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
      }
    }
  }
})

Чтобы проверить, успешен ли запрос интерфейса, мы находимся вIndex/index.jsxДобавьте внутрь следующий код:

import React, { useEffect } from 'react'
import { Button } from 'antd'
import { get } from '../../utils'

export default function Index() {
  useEffect(() => {
    get('/index-infos').then(() => {
      
    })
  }, [])
  return <div>
    <Button type='primary'>Index</Button>
  </div>
}

Перезапустите проект, и результат будет выглядеть так:

Настройки псевдонима resolve.alias

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

export default defineConfig({
	...
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'), // 根路径
      '@': path.resolve(__dirname, 'src') // src 路径
    }
  }
  ...
})

После настройки мы перепишем некоторые пути в приведенном выше коде следующим образом:

// router/index.js
import Index from '@/container/Index'
import About from '@/container/About'

// utils/index.js
import config from '~/config'

// App.jsx
import routes from '@/router'

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

Суммировать

Эта статья заканчивается здесь. Какие? ты все еще хочешьTS,CSS Module,Eslint, не создавайте проблем, идите на склад, чтобы загрузить код, и играйте медленно, меня вырвало, пожалуйста, похвалите его, милый брат ~~~. Наберу 500 лайков, напишу еще одинVite + Vue + element-plus из. йо Йо