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:
1 2 3 4 5 6 7 8 | <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"react-scripts"</span><span class="token operator">:</span> <span class="token string">"4.0.3"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@vitejs/plugin-react"</span><span class="token operator">:</span> <span class="token string">"1.1.1"</span><span class="token punctuation">,</span> + <span class="token property">"vite"</span><span class="token operator">:</span> "<span class="token number">2.7</span>.<span class="token number">0</span> + <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 | <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"react-scripts start"</span><span class="token punctuation">,</span> - <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"react-scripts build"</span><span class="token punctuation">,</span> - <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"react-scripts test"</span><span class="token punctuation">,</span> - <span class="token property">"eject"</span><span class="token operator">:</span> <span class="token string">"react-scripts eject"</span> + <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"vite"</span><span class="token punctuation">,</span> + <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"vite build"</span> <span class="token punctuation">}</span> |
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%
1 2 3 4 5 6 7 | - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>%PUBLIC_URL%/favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>%PUBLIC_URL%/logo192.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/logo192.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manifest<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>%PUBLIC_URL%/manifest.json<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manifest<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/manifest.json<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
5. Trong file index.html chỉnh lại đường dẫn trỏ tới file index.jsx
1 2 | + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/src/index.jsx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"/><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
6. Tạo file config vite.config.js
1 2 3 4 5 6 7 | <span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vite"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">"@vitejs/plugin-react"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
7. Tạo đường dẫn tuyệt đối
1 2 | <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">"common/button"</span><span class="token punctuation">;</span> <span class="token comment">// <root>/src/common/button.jsx</span> |
- Trong vite.config.js
1 2 3 4 5 6 7 8 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> resolve<span class="token operator">:</span> <span class="token punctuation">{</span> alias<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> find<span class="token operator">:</span> <span class="token string">"common"</span><span class="token punctuation">,</span> replacement<span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src/common"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span> |
8. Trong file .env đổi REACT_APP_ => VITE_
Cài đặt biến môi trường
1 2 3 | - REACT_APP_DOMAIN=https://vidu.com + VITE_DOMAIN=https://vidu.com |
Sử dụng
1 2 3 | <span class="token operator">-</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">REACT_APP_DOMAIN</span> <span class="token operator">+</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_DOMAIN</span> |
9. Trong các dự án Typescript thì cần tạo file vite-env.d.ts trong folder src
1 2 | <span class="token comment">/// <reference types="vite/client" /></span> |
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á