Tìm hiểu ViteJS (Phần 2)

Tạo dự án Vite đầu tiên

Với NPM:

npm create vite@latest

Với Yarn:

yarn create vite

Bạn có thể chỉnh định tên project và template bạn muốn sử dụng thông qua các option:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

Community Templates:

Bạn có thể dụng 1 tool ví dụ degit để tạo project với 1 template:

npx degit user/project my-project
cd my-project

npm install
npm run dev

Nếu project sử dụng main làm nhánh mặc định, thêm hậu tố #main:

npx degit user/project#main my-project

index.html và Project Root:

Trong Vite project, index.html là trung tâm thay vì để trong thư mục public. Trong suốt quá trình phát triển dự án, index.html sẽ là entry point của ứng dụng. Nó gọi ra <script type="module" src="..."> là tham chiếu đến code javascript của bạn. Thậm chí inline <script type="module"> và CSS <link href=""> cũng thừa hưởng các tính năng của Vite. URLs trong index.html tự động rebase nên không cần chỉ định %PUBLIC_URL%.

Tương tự các static http servers, Vite sử dụng khái niệm “root directory” với những files được serve. Các đường dẫn tuyệt đối trong source code sẽ được xử lý sử dụng project root, vì vậy bạn có thể viết code như đang làm việc với 1 file tĩnh.

Giao diện dòng lệnh:

Trong 1 project Vite, bạn có thể dùng lệnh vite trong npm scripts, hoặc chạy trực tiếp npx vite. Scripts mặc định trong 1 project:

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

Các tính năng:

NPM Dependency Resolving & Pre-Bundling:

Native ES imports không hỗ trợ import module kiểu như sau:

import { someMethod } from 'my-dep'

Vite sẽ xác định các imports như vậy và thực hiện như sau:

1. Pre-bundle nhằm cải thiện hiệu năng load page và convert CommonJS / UMD modules thành ESM. Pre-bundle được thực hiện bởi esbuild và khiến start time nhanh hơn các javascript-based bundler.
2. Viết lại imports thành URL hợp lệ kiểu /node_modules/.vite/deps/my-dev.js?v=f3sf2ebd nhờ vậy trình duyệt có thể import đúng cách.

Hot Module Replacement:

Vite cung cấp 1 HMR API thông qua native ESM. Với HMR bạn có thể cập nhật tức thì, chính xác mà không cần tải lại trang hoặc làm mất trạng thái ứng dụng. Vite cung cấp HMR tích hợp với Vue và React.

CSS:

Import .css file sẽ inject nội dung của nó vào page thông qua thẻ <style>. Bạn cũng có thể truy vấn CSS đã xử lý dưới dạng string như module default export.

@import inline và rebase:

Vite cũng cấu hình sẵn hỗ trợ CSS @import inline thông qua postcss-import.