antd+react 프로젝트 이전vite의 해결 방안을 상세히 설명합니다.
Vite가 뭐예요?
본고의 주인공으로서 먼저vite라는 구축 도구를 간단하게 소개한다. 이 도구는 유우계가 내놓은 [차세대 전단 개발과 구축 도구]이다.vite는 사실 새로운 도구가 아니다. 일찍이 1년여 전에 이미 많은 버전을 내놓았다. 2.x버전의 출시는 앞부분에 충분한 진동을 일으키고 vite의 성숙함과 강함을 상징한다. 여기에서vite를 상세하게 소개할 생각은 없다. 홈페이지https://cn.vitejs.dev/를 참고하여 알 수 있다.
마이그레이션 프로세스
vite라는 도구를 알게 되면 우리는 이전 작업에 착수할 수 있다.
1.vite 의존 설치
npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D2. 프로젝트 기존 의존 항목 업데이트
여기 저희 프로젝트는 dva+antd3를 사용합니다.x를 기초로 하는 개발 프레임워크입니다. 여기서 저는 시스템의 주요 의존항을 최신 버전으로 업그레이드했습니다. 예를 들어 dva에서 제가 사용하는 2.6.0-beta입니다.22버전, 기타 첨부된react,react-dom,react-router-dom 및 @babel/plugin-transform-runtime 등 관련 의존항이 모두 업데이트되었습니다(antd 또는 3.x 버전, 4.x의 큰 버전으로 업데이트되지 않음). 이 부분은 자신의 실제 수요에 달려 있습니다.
3. 프로젝트 루트에vite를 추가합니다.config.js 프로필
웹 팩의 프로필에 비해vite는 매우 간단하고 많은 기능이 내장되어 있다. 예를 들어 정적 자원에 대한 처리, 기능 오픈도 비교적 간단하다. 구체적으로 다음과 같다.
import { defineConfig } from 'vite';
import vitePluginHtml from 'vite-plugin-html';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
}
},
publicDir: './src/configs',
plugins: [
reactRefresh(),
antdViteImportPlugin(),
vitePluginHtml({
minify: true,
inject: {
injectData: {
title: 'vite-react-example',
injectScript: '<script src="/configs.js"></script>', // publicDir
},
injectOptions: {
filename: './index.html', //
}
},
}),
],
server: {
open: true,
port: 10010,
}
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title><%- title %></title>
......
</head>
<body>
<div id="app"></div>
<script>
var global = globalThis || window; //
</script>
<%- injectScript %>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>4. 파일 접미사 수정
이 파일은 js를 접두사로 하는react 구성 요소입니다. 웹 페이지 구축 플랫폼에서 js(x),ts(x)는 문제없습니다. 하지만vite를 사용한다면 ts,jsx,tsx의 접두사 파일이 가장 좋습니다. 이 문제에 관해서는 이 issue를 보실 수 있습니다.https://github.com/vitejs/vite/issues/1552마지막으로 작가가 대량으로 접두사를 고치는 것이 이렇게 어렵다는 구조를 냈으니 됐어. 그냥 고쳐. 수동으로 고치는 것이 귀찮으면 스크립트를 쓰는 것도 어렵지 않아.
5. 시작 스크립트 추가
"scripts": {
"dev": "vite",
"build": "vite build",
......
}
당면한 문제
1.decorators not support
비즈니스 코드에서, 우리는 dva가 제공하는connect를 사용하여 귀속 상태를 사용합니다. 예를 들어 다음과 같습니다.
@connect(state => state.foo)
class Foo extends React.PureComponent {
....
}
2.antd Unknown theme type: undefined, name: undefined
우리 프로젝트는 아직도antd를 사용하고 있습니다.x 버전, 시작할 때 이 오류가 발생했습니다. 사실은antd 구성 요소를 초기화할 때antd/es/icon/index를 불러왔습니다.js 파일:
import * as allIcons from '@ant-design/icons/lib/dist';
......
ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(function (key) {
return allIcons[key];
})));
......
......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
......
--- ---
import { Button } from 'antd';
--- ---
import Button from 'antd/lib/button';
import 'antd/lib/button/style/index.css';
이 플러그인의 사용에 관해서는 https://www.npmjs.com/package/antd-vite-import-plugin 참고할 수 있습니다.
3.'default' is not exported
때때로 삼자 의존항을 불러오는 데 오류가 발생할 수 있습니다. 예를 들어'default'is not exported 등입니다. 참고할 수 있습니다https://github.com/vitejs/vite/issues/2679
실제 개발 과정에서 이상한 문제에 부딪히는 것은 모두 맛보는 대가이다.
속도 싸움
vite의 장점 중 하나는 빠르다는 것이다. 그러면 웹팩과 비교하면 도대체 얼마나 큰 차이가 있는가. 여기서 우리는 웹팩과vite로 각각 같은 로컬 프로젝트를 시작한다.
구축 도구
시작 시간 (ms)
vite
702ms
webpack
7093ms
이것은 대략적인 대비일 뿐이다. 데이터적으로 보면 10배의 차이가 있다. 속도로만 말하자면vite는 매우 빠르다. 홈페이지의 해석에 따르면vite는esbuild를 사용하여 미리 구축하는 의존을 사용할 것이다.Esbuild는 Go를 사용하여 작성되며 JavaScript로 작성된 패키지 사전 구축 의존도보다 10-100배 빠릅니다.
마지막
한바탕 고생을 한 후에vite2의 성숙도가 부족하다고 생각해서 작은 프로젝트에서 시도해 볼 수 있다.나로서는 우선 웹 팩을 사용하기로 결정합시다. 웹 팩은 이렇게 많은 발전을 거쳤기 때문에 구덩이가 매우 적지만 현재vite는react에 있어서 그렇게 완벽하지 않습니다.
이것은antd+react 프로젝트 이전vite의 해결 방안에 대한 상세한 설명입니다. 더 많은 관련antdreact 이전vite 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React, AntD 및 Tailwind: CSS 충돌 수정React, 및 (아마도 시장에서 구할 수 있는 대부분의 다른 UIKIT)을 사용하는 경우 일부 CSS 충돌이 발생할 수 있습니다. 예를 들어 AntDModal 구성 요소는 바닥글에 기본적으로 "확인"및 "취소"버튼...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
