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

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á