- vừa được xem lúc

Chuyển đổi từ Create React App sang Vite

0 0 21

Người đăng: Viên Ngô

Theo Viblo Asia

Giới thiệu

Create React App (CRA)

Là 1 tập hợp các công cụ phát triển cho ứng dụng React của bạn. Nó sẽ phù hợp với những người mới bắt đầu vì bạn không cần quan tâm tới những cài đặt các công cụ cần tích hợp vào dự án. Tuy nhiên thì CRA cũng có những hạn chế về mặt tốc độ và hiệu năng

ViteJS

Nó là công cụ giúp lập trình viên phát triển ứng dụng nhanh hơn và gọn gàng hơn

=> Trong thời gian vừa qua thì Vite cũng đã khẳng định được giá trị mà nó mang lại, nên được các lập trình viên hàng đầu sử dụng và với 1 cộng đồng đông đảo hỗ trợ. Trong bài viết này thì mình sẽ không chỉ ra ưu/ nhược điểm của từng loại mà mình sẽ hướng dẫn các bạn chuyển dự án từ CRA sang Vite luôn nhá.

Bắt đầu nào

1. Trong file package.json:

 "dependencies": {
- "react-scripts": "4.0.3" },
+ "devDependencies": {
+ "@vitejs/plugin-react": "1.1.1",
+ "vite": "2.7.0
+ }
 "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "vite",
+ "build": "vite build" }

2. Chạy npm install hoặc yarn để tải các thư viện mới về

3. Di chuyển file index.html từ public/index.html => index.html trong root project folder

4. Trong file index.html remove %PUBLIC_URL%

- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="apple-touch-icon" href="/logo192.png" />
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="manifest" href="/manifest.json" />

5. Trong file index.html chỉnh lại đường dẫn trỏ tới file index.jsx

+ <script type="module" src="/src/index.jsx"></script>

6. Tạo file config vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()],
}

7. Tạo đường dẫn tuyệt đối

import Button from "common/button"; // <root>/src/common/button.jsx
  • Trong vite.config.js
export default defineConfig({ resolve: { alias: [{ find: "common", replacement: resolve(__dirname, "src/common") }] }, ...

8. Trong file .env đổi REACT_APP_ => VITE_

Cài đặt biến môi trường

- REACT_APP_DOMAIN=https://vidu.com
+ VITE_DOMAIN=https://vidu.com

Sử dụng

- process.env.REACT_APP_DOMAIN
+ import.meta.env.VITE_DOMAIN

9. Trong các dự án Typescript thì cần tạo file vite-env.d.ts trong folder src

/// <reference types="vite/client" />

Như vậy là đã hoàn thành việc chuyển từ CRA sang Vite. Các bạn yarn start để xem tốc độ run server cũng như khi build để thấy được sự lợi hại của ViteJS nhá😉😉😉. Trong bài viết sau mình sẽ cập nhật 1 vài phiên bản của ViteJs để xem nó đã có những nâng cấp nào. Cũng như là so sánh hiệu năng giữa ViteJS và Webpack nhá

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67