trieu.dev.da
Nguyễn Thanh Triề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:
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%
5. Trong file index.html chỉnh lại đường dẫn trỏ tới file index.jsx
6. Tạo file config vite.config.js
7. Tạo đường dẫn tuyệt đối
8. Trong file .env đổi REACT_APP_ => VITE_
Cài đặt biến môi trường
Sử dụng
9. Trong các dự án Typescript thì cần tạo file vite-env.d.ts trong folder src
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.
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:
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%
5. Trong file index.html chỉnh lại đường dẫn trỏ tới file index.jsx
6. Tạo file config vite.config.js
7. Tạo đường dẫn tuyệt đối
- Trong vite.config.js
8. Trong file .env đổi REACT_APP_ => VITE_
Cài đặt biến môi trường
Sử dụng
9. Trong các dự án Typescript thì cần tạo file vite-env.d.ts trong folder src
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.