Bắt đầu với Vite: Công cụ xây dựng cơ bản
Khi các ứng dụng web trở nên giàu tính năng hơn, nhu cầu về các công cụ xây dựng nhanh và hiệu quả tiếp tục tăng theo nhu cầu.
Vite là một công cụ xây dựng hiện đại cung cấp máy chủ phát triển nhanh như chớp và quy trình xây dựng được tối ưu hóa, cho phép người dùng hợp lý hóa quy trình làm việc của họ và cải thiện trải nghiệm của người dùng cuối.
Bạn sẽ khám phá cách bắt đầu với Vite, bao gồm quy trình cài đặt, các tính năng cần thiết và các lệnh Giao diện dòng lệnh (CLI).
Mục Lục
Khởi tạo dự án Vite
Trước khi có thể sử dụng Vite, bạn phải cài đặt Node.js và Trình quản lý gói Node trên hệ thống của mình. Sau khi cài đặt hai gói này, bạn có thể tiến hành tạo một dự án với Vite.
Đây là cách khởi tạo một dự án với Vite bằng npm:
npm init vite
Khi bạn chạy lệnh này, nó sẽ tạo một dự án Vite mới trong thư mục làm việc hiện tại của bạn. Lệnh nhắc bạn đưa ra các lựa chọn cấu hình cơ bản để thiết lập dự án Vite mới của mình.
Đây là bảng phân tích các tùy chọn mà lệnh nhắc bạn chọn:
- Tên của Dự án. Khi bạn chạy lệnh, nó sẽ nhắc bạn cung cấp tên cho dự án mới của bạn. Tên bạn cung cấp cũng sẽ xuất hiện trong gói.json tệp và đóng vai trò là tên của thư mục dự án của bạn.
- Chọn một Khung. Lời nhắc này sẽ yêu cầu bạn chọn một khuôn khổ cho dự án của bạn. Vite hiện hỗ trợ các khung giao diện người dùng phổ biến như React, Vue, Angular và tùy chọn Vanilla cho mã JavaScript đơn giản.
- Chọn một biến thể. Điều này nhắc bạn chọn một biến thể cho dự án của mình, bao gồm các lựa chọn thay thế như JavaScript và ngôn ngữ tập hợp con của nó TypeScript.
Sau khi bạn cung cấp thông tin cần thiết, Vite sẽ tạo cấu trúc dự án mới trong thư mục làm việc hiện tại của bạn. Cấu trúc sẽ đại diện cho một thiết lập dự án cơ bản, bao gồm một gói.json tập tin src thư mục với một index.html Và chính.js tập tin, và một công cộng danh mục.
Sau khi tạo cấu trúc dự án, bạn có thể điều hướng đến thư mục dự án bằng cách chạy cd
Để bắt đầu một máy chủ phát triển và giám sát bất kỳ thay đổi nào được thực hiện cho dự án của bạn, bạn sẽ chạy chương trình npm chạy dev lệnh trong thiết bị đầu cuối dự án của bạn.
Các tính năng của Vite
Các tính năng của Vite tập trung vào việc hợp lý hóa quy trình xây dựng và nâng cao trải nghiệm xây dựng web.
Máy chủ phát triển nhanh
Máy chủ phát triển của Vite sử dụng các mô-đun ES gốc và tải mô-đun chậm, cho phép tốc độ đáng kinh ngạc. Điều này cho phép các vòng phản hồi nhanh và thời gian khởi động nhanh như chớp.
Quy trình xây dựng được tối ưu hóa
Vite đã nâng cao quy trình xây dựng của mình để tạo ra mã sẵn sàng sản xuất, được tối ưu hóa và được rút gọn. Ngoài ra, nó tạo ra một tệp kê khai có thể lưu vào bộ nhớ cache nội dung phiên bản và phá sản.
Hỗ trợ các Front-End Framework khác nhau
Vite hỗ trợ nhiều framework front-end khác nhau, bao gồm Vue và các framework tương tự như React Js và Angular Js. Điều này cho phép các nhà phát triển chọn khung ưa thích của họ và khai thác các khả năng mạnh mẽ của Vite.
Thay thế mô-đun nóng (HMR)
Tính năng Thay thế mô-đun nóng (HMR) của Vite cho phép cập nhật ứng dụng nhanh chóng và liền mạch mà không yêu cầu làm mới toàn bộ trang. Điều này làm cho quá trình phát triển nhanh hơn và hiệu quả hơn.
Tiền xử lý CSS và Tích hợp PostCSS
Vite hỗ trợ tiền xử lý CSS, bao gồm Sass, Less và Stylus. Nó cũng tích hợp với PostCSS, cho phép chuyển đổi và tối ưu hóa bổ sung cho CSS.
Vite đi kèm với nhiều tính năng khác, bao gồm hỗ trợ TypeScript, JSX và WebAssugging. Với việc phát hành Vite v4.0.4, cộng đồng nhà phát triển của Vite đã phát triển và tích cực bảo trì phần mềm, thường xuyên bổ sung các tính năng mới.
Giao diện dòng lệnh của Vite (CLI)
Giao diện dòng lệnh (CLI) của Vite là một công cụ hữu ích để tùy chỉnh hành vi của Vite. Nó cung cấp một loạt các lệnh thiết yếu cũng giúp hợp lý hóa quá trình phát triển. Dưới đây là một số lệnh CLI quan trọng:
vite xây dựng
Lệnh này sẽ xây dựng ứng dụng cho môi trường sản xuất, tối ưu hóa và thu nhỏ mã để ứng dụng sẵn sàng triển khai. Sử dụng lệnh này, bạn có thể đảm bảo rằng ứng dụng của mình nhanh và hiệu quả nhất có thể và sẵn sàng để phân phối cho người dùng của bạn.
bản xem trước
Lệnh này cho phép bạn xem trước mã được tạo trước khi triển khai mã đó vào sản xuất. Nếu bạn muốn đảm bảo rằng mọi thứ trông giống và hoạt động như mong đợi và không có sự cố hoặc sự cố rõ ràng nào cần chú ý, thì đây là một lệnh hữu ích để chạy.
vite tối ưu hóa
vite tối ưu hóa có sẵn trong Vite 2.6 và các phiên bản mới hơn để phân tích mã dự án và tạo các bản dựng sản xuất được tối ưu hóa bằng cách thực hiện thao tác lắc cây, tách mã và nhúng trực tiếp các nội dung nhỏ vào bản dựng cuối cùng để giảm các yêu cầu cần thiết khi tải ứng dụng.
vite tối ưu hóa tự động thực hiện trong quá trình vite xây dựng lệnh, tạo ra các bản dựng sản xuất được tối ưu hóa. Bạn cũng có thể chạy riêng để kiểm tra kích thước và hiệu suất của bản dựng
Tệp cấu hình của Vite
Trong Vite, tệp cấu hình xác định các tùy chọn khác nhau cho quá trình xây dựng. Tệp cấu hình Vite sử dụng cú pháp mô-đun JavaScript và ES6.
Theo mặc định, bạn nên đặt tên cho tệp cấu hình của mình vite.config.js và đặt nó vào thư mục gốc của dự án.
Dưới đây là một số tùy chọn được sử dụng phổ biến nhất trong tệp cấu hình Vite:
- nguồn gốc. Chỉ định thư mục gốc của dự án.
- máy chủ. Định cấu hình máy chủ phát triển. Nó bao gồm các tùy chọn để định cấu hình máy chủ, cổng và yêu cầu ủy quyền đối với phụ trợ API.
- bổ sung. Cho phép thêm plugin vào quy trình xây dựng Vite. Plugin là một chức năng sửa đổi quy trình xây dựng theo một cách nào đó, chẳng hạn như thêm hỗ trợ cho định dạng tệp mới hoặc chuyển đổi mã nguồn.
- giải quyết. Điều này định cấu hình cách Vite giải quyết các mục nhập trong dự án. Nó bao gồm các tùy chọn để chỉ định bí danh, tiện ích mở rộng và thư mục mô-đun.
Đây là một ví dụ về tệp cấu hình Vite:
import { defineConfig } from 'vite';
import path from 'path';export default defineConfig({
server: {
port: 3000,
open: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [],
});
Tệp cấu hình này thiết lập một dự án Vite cơ bản với:
- một máy chủ phát triển cục bộ chạy trên cổng 3000
- một bí danh cho src danh mục
- không có plugin
Một số tài nguyên trực tuyến giải thích rất chi tiết cách sử dụng Vite với các khung phổ biến như React, Vue và Angular.
Ngoài ra, có rất nhiều thông tin về cách sử dụng Vite hiệu quả trong tài liệu chính thức của nó. Với những tài nguyên có sẵn này, bạn có thể tích hợp Vite vào dự án tiếp theo của mình.