ViteJS được ra mắt vào năm 2020, là công cụ build tool được giới thiệu là vô cùng mạnh mẽ, có tốc độ kinh hoàng, so với Webpack thì chiếm ưu thế hơn về mọi mặt.
Vite là gì?
Khá thú vị khi trong tiếng Pháp thì Vite có nghĩa là nhanh. Tuy nhiên nó mang một ý nghĩa hơn cả là chỉ nói về “tốc độ”.
Tổng quan thì Vite là một build tool sử dụng module bundler có tên là Rollup, được tối ưu hóa cao cho việc generating nội dung tĩnh (css, html).
Ban đầu, ViteJS được xây dựng dành riêng cho VueJS. Về sau thì Vite mở rộng ra hỗ trợ cả React, Preact và Svelte…
Đặc điểm của ViteJS
Về chức năng, ViteJS ra đời sau nên các chức năng cũng tương tự Vue-CLI, cũng project scaffold, dev server with HMR…
Ngoài ra, ViteJS hỗ trợ các ngôn ngữ, biến thể JS, CSS rất tốt như:
- Hỗ trợ Typescript, JSX và TSX
- Hỗ trợ các CSS preprocessor như .scss, .less
- Static assets như images và JSON files
Tuy nhiên, Vite cũng có một vài khác biệt như:
- Vite không based trên Webpack. Thay vào đó là sử dụng Rollup
- DevServer sử dụng native ES modules trên trình duyệt
- Vite build sử dụng Rollup, được đánh giá khá nhanh
Cách sử dụng ViteJS
Để bắt đầu một dự án sử dụng ViteJS, bạn có thể gõ lệnh dưới đây để khởi tạo:
- npm init vite
Sau đó thì bạn nhập tên dự án, công nghệ muốn sử dụng (Vue, ReactJS…), chọn ngôn ngữ lập trình (Javascript, Typescript…).
Lệnh chạy dự án:
- npm install
- npm run dev
Để đóng gói và đưa ứng dụng ra thị trường, Vite cũng tương tự như Vue-CLI, bạn cũng cần gõ lệnh build như dưới đây.
- npm run build
Cấu hình Vite và Plugins
Mặc dù Vite mới ra mắt, nhưng nó cũng có sẵn rất nhiều plugin (một số plugin của Rollup cũng có thể sử dụng được cho Vite).
Tham khảo thêm những plugin chính chủ: https://vitejs.dev/plugins/
Khi chạy Vite từ command line, Vite sẽ tự động xử lý một file cấu hình có tên là vite.config.js trong thư mục gốc của dự án
Kết luận
Nhắc lại, Vite là một công cụ phục vụ cho môi trường phát triển dự án, không phải là một framework. Chúng ta đã có thể tìm hiểu cách Vite.js cách mạng hóa phát triển frontend với máy chủ phát triển siêu nhanh, hỗ trợ Module ES gốc và xây dựng nhanh chóng cho môi trường sản xuất. Hi vọng cộng đồng Frontend sẽ có thêm một bộ công cụ ấn tượng đáng để trải nghiệm cho dự án của mình.
Giảng viên Trịnh Thị Thủy Tiên
Bộ môn Công nghệ thông tin
FPT Polytechnic Đà Nẵng
