Quay lại trang chủ
Bạn đã bao giờ cảm thấy việc build front-end giống như đang kéo lê một quả tạ khổng lồ chưa? Hết Webpack, Parcel rồi đến đống cấu hình rối như canh hẹ, chỉ thiếu mỗi việc làm bạn hét lên: “Tôi ký đơn nghỉ việc đây!”
Vậy thì chào mừng bạn đến với Vite - "đứa trẻ vàng" mới trong làng build tool. Nhanh như chớp ⚡, đơn giản đến mức "chưa học React cũng làm được" (làm đc hello world thôi) và quan trọng hơn cả, nó làm cho bạn cảm thấy mình đúng là dev xịn.
Trong tiếng Pháp, Vite nghĩa là "nhanh". Cách đọc: "vi:t", vần với beat, tui hay gọi là vịt (tui đọc sai đó kệ tui). 🦆
Nghe quen không?
Đừng để những điều này làm bạn mất niềm tin vào ngành IT, vào cuộc sống này. Vite sinh ra để giúp bạn:
Bạn chỉ cần code và tận hưởng.
Cầm ngay cây terminal lên và gõ:
npm create vite@latest my-vite-awesome-project -- --template react
Bạn thích Vue, Svelte, hay vanilla JS? Thay "react" bằng cái tên bạn muốn. Vite cân hết!
cd my-vite-awesome-project
npm install
npm run dev
Boom! Dev server chạy mượt hơn cả cún nhà hàng xóm rượt. 🐕 💨
Project Vite nhìn sẽ rất... tối giản:
my-vite-awesome-project/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
└── vite.config.js
Bạn có thể thêm vào các thư mục như styles, utils, hay services mà không ai đánh giá đâu.
Mở file vite.config.js và thêm một số cấu hình:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
build: {
outDir: 'dist',
sourcemap: true,
},
});
Đoạn code trên giúp bạn cấu hình cổng dev server, thư mục xuất file khi build, và bật source map. Vite còn rất nhiều cách để cấu hình tuỳ thích!
Tạo một component mới src/Hello.jsx và xem Viteeee 🦆 làm việc:
import { useState } from 'react';
export default function Hello() {
const [name, setName] = useState('Slim Shady');
return (
<div>
<h1>My name is, chka-chka, {name}!</h1>
<input
type="text"
value={name}
// tui là fan :)
// onChange={() => setName('Slim Shady')}
onChange={(e) => setName(e.target.value)}
placeholder="Enter a name"
/>
</div>
);
}
Sau đó, import và sử dụng nó trong 'App.jsx':
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '../public/vite.svg';
import './App.css';
import Hello from './Hello.jsx';
function App() {
const [count, setCount] = useState(0);
return (
<>
<Hello />
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
);
}
export default App;
Lưu lại và tận hưởng quá trình cập nhật cực nhanh của Vite!
Những thứ hay ho mà Vite có thể làm Vite không chỉ đơn giản là "công cụ build". Nó còn rất nhiều tính năng thú vị:
Tự động tối ưu hóa tài nguyên tĩnh: Hình ảnh, icon hay bất kỳ tài nguyên nào, Vite đều làm cho chúng nhỏ gọn hơn. Quản lý môi trường với .env dễ dàng: Các biến môi trường? Đơn giản thôi, chỉ cần tạo file .env là xong. Plugins? Số lượng vô tận: Có plugin cho mọi nhu cầu, từ CSS pre-processors cho đến việc tối ưu hóa ảnh. Pre-processors CSS? Chắc chắn rồi: Cài Sass? Cứ làm thôi, Vite lo phần còn lại. Thêm Sass vào Vite
npm install --save-dev sass
Tạo file App.scss và thêm mã:
$awesome-color: #ff69b4;
.card {
color: $awesome-color;
}
Sau đó, import file Sass vào App.jsx
:
import './App.scss';
Nhanh: Dev server nhanh đến mức bạn sẽ quên mất việc refresh lại trang. Dễ thiết lập: Chỉ cần một dòng lệnh, bạn đã có ngay một project để bắt đầu. Framework agnostic: Dù bạn là fan của React, Vue, Svelte hay thậm chí chỉ thích vanilla JS, Vite đều hỗ trợ. Sẵn sàng cho môi trường sản xuất: Rollup sẽ tối ưu mã nguồn để bạn có những bundle nhẹ nhàng, mượt mà. Vậy thì, đừng ngần ngại nữa, hãy bắt đầu với Vite ngay hôm nay! 🏃💨