ngày càng trở nên phổ biến hơn đối với các nhà phát triển, nhưng vì cộng đồng không lớn (như trong ), nên bạn có thể cần tạo plugin tùy chỉnh của riêng mình để giải quyết vấn đề của mình. Trong bài viết này, chúng tôi sẽ thảo luận về cách tạo plugin cho và tôi sẽ chia nhỏ plugin của riêng mình. Vite Webpack Vite Cách plugin hoạt động trong Vite Để tạo plugin, điều quan trọng cần biết là Vite sử dụng các hệ thống xây dựng khác nhau cho máy chủ phát triển (command ) và gói (command ). vite vite build Đối với máy chủ phát triển, nó sử dụng với các mô-đun ES gốc, được hỗ trợ bởi các trình duyệt hiện đại và chúng tôi không cần phải gộp mã vào một tệp duy nhất và nó cung cấp cho chúng tôi HRM (Thay thế mô-đun nóng) nhanh chóng. esbuild Đối với gói, nó sử dụng vì nó linh hoạt và có hệ sinh thái rộng lớn; nó cho phép tạo ra các gói sản xuất được tối ưu hóa cao với các định dạng đầu ra khác nhau. rollup.js Giao diện plugin của Vite dựa trên Rollup nhưng có các tùy chọn và hook bổ sung để làm việc với máy chủ nhà phát triển. Tạo một plugin cơ bản Khi tạo một plugin, bạn có thể đưa plugin đó vào của mình. Không cần phải tạo một gói mới cho nó. Khi bạn thấy rằng một plugin hữu ích trong các dự án của mình, hãy cân nhắc việc chia sẻ plugin đó với cộng đồng và đóng góp cho hệ sinh thái Vite. vite.config.js Ngoài ra, vì rollup.js có cộng đồng và hệ sinh thái lớn hơn nên bạn có thể cân nhắc việc tạo một plugin cho rollup.js và nó sẽ hoạt động tốt như vậy trong Vite. Vì vậy, nếu chức năng plugin của bạn chỉ hoạt động với gói, bạn có thể sử dụng plugin rollup.js thay vì Vite và người dùng có thể sử dụng plugin rollup của bạn trong các dự án Vite của họ mà không gặp vấn đề gì. Nếu bạn tạo một plugin cho rollup, bạn sẽ thu hút được nhiều người dùng chỉ sử dụng rollup.js hơn. Nếu plugin của bạn ảnh hưởng đến máy chủ phát triển thì bạn hãy sử dụng plugin Vite. Hãy bắt đầu tạo plugin trực tiếp trong : vite.config.ts // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin { return { name: 'my-plugin', configResolved(config) { console.log(config); }, }; } export default defineConfig({ plugins: [ myPlugin(), ], }); Trong ví dụ này, tôi đã tạo một plugin có tên để in cấu hình Vite ngay khi nó được giải quyết trong bảng điều khiển ở cả hai giai đoạn: máy chủ dev và gói. Nếu tôi chỉ muốn in cấu hình ở chế độ máy chủ nhà phát triển thì tôi nên thêm và cho gói. myPlugin apply: 'serve' apply: 'build' // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin { return { name: 'my-plugin', apply: 'serve', configResolved(config) { console.log(config); }, }; } export default defineConfig({ plugins: [ myPlugin(), ], }); Ngoài ra, tôi có thể trả về một loạt plugin; nó rất hữu ích trong việc tách chức năng cho máy chủ dev và gói: // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin[] { return [ { name: 'my-plugin:serve', apply: 'serve', configResolved(config) { console.log('dev server:', config); }, }, { name: 'my-plugin:build', apply: 'build', configResolved(config) { console.log('bundle:', config); }, }, ]; } export default defineConfig({ plugins: [ myPlugin(), ], }); Và đó là khá nhiều; bạn có thể dễ dàng thêm các plugin nhỏ vào cấu hình Vite. Và nếu plugin quá lớn, tôi thích chuyển nó sang tệp khác hoặc thậm chí tạo một gói. Nếu bạn cần thứ gì đó phức tạp hơn, có rất nhiều hook hữu ích mà bạn có thể khám phá trong tài liệu của Vite. Nhưng để làm ví dụ, hãy chia nhỏ plugin của riêng tôi bên dưới. Phá vỡ một plugin thực sự Vì vậy, tôi có một plugin để tạo các họa tiết SVG dựa trên các tệp biểu tượng - . vite-plugin-svg-spritemap Mục đích là lấy tất cả các biểu tượng trong thư mục và thu thập nội dung của chúng vào một tệp duy nhất được gọi là SVG sprite. Hãy bắt đầu từ giai đoạn gói: .svg src/icons .svg import { Plugin, ResolvedConfig } from 'vite'; import path from 'path'; import fs from 'fs-extra'; function myPlugin(): Plugin { let config: ResolvedConfig; return { name: 'my-plugin:build', apply: 'build', async configResolved(_config) { config = _config; }, writeBundle() { const sprite = getSpriteContent({ pattern: 'src/icons/*.svg' }); const filePath = path.resolve(config.root, config.build.outDir, 'sprite.svg'); fs.ensureFileSync(filePath); fs.writeFileSync(filePath, sprite); }, }; } Hook cho phép chúng ta lấy cấu hình khi quyết định sử dụng nó trong các hook tiếp theo; configResolved Hook được gọi sau khi quá trình đóng gói kết thúc và ở đây, tôi sẽ tạo tệp ; writeBundle sprite.svg Hàm trả về một chuỗi các họa tiết SVG đã chuẩn bị dựa trên mẫu . Tôi sẽ không đi sâu hơn với điều này; bạn có thể xem ; getSpriteContent src/icons/*.svg bài viết khác của tôi giải thích toàn bộ quá trình tạo SVG sprite Sau đó, tôi tạo đường dẫn tuyệt đối đến để đưa nội dung sprite SVG vào , đảm bảo rằng tệp đó tồn tại (hoặc tạo một) với ., và ghi nội dung sprite SVG vào đó . sprite.svg path.resolve() fs.ensureFileSync Bây giờ là phần thú vị nhất - giai đoạn máy chủ phát triển. Tôi không thể sử dụng ở đây và tôi không thể lưu trữ tệp khi máy chủ nhà phát triển đang chạy, vì vậy chúng tôi cần sử dụng phần mềm trung gian của máy chủ để nhận yêu cầu tới . writeBundle sprite.svg import { Plugin, ResolvedConfig } from 'vite'; function myPlugin(): Plugin { let config: ResolvedConfig; return { name: `my-plugin:serve`, apply: 'serve', async configResolved(_config) { config = _config; }, configureServer(server) { // (1) return () => { server.middlewares.use(async (req, res, next) => { // (2) if (req.url !== '/sprite.svg') { return next(); // (3) } const sprite = getSpriteContent({ pattern, prefix, svgo, currentColor }); res.writeHead(200, { // (4) 'Content-Type': 'image/svg+xml, charset=utf-8', 'Cache-Control': 'no-cache', }); res.end(sprite); }); }; }, }; } là một cái móc để định cấu hình máy chủ dev. Nó kích hoạt trước khi cài đặt phần mềm trung gian nội bộ của Vite; trong trường hợp của tôi, tôi cần thêm phần mềm trung gian tùy chỉnh sau phần mềm trung gian nội bộ, vì vậy tôi trả về một hàm; configureServer Để thêm phần mềm trung gian tùy chỉnh nhằm đáp ứng mọi yêu cầu đến máy chủ nhà phát triển, tôi sử dụng . Tôi cần nó để phát hiện các yêu cầu có URL , để tôi có thể mô phỏng hành vi của tệp; server.middlewares.use() [localhost:3000/sprite.svg](http://localhost:3000/sprite.svg) Nếu URL yêu cầu không phải là - hãy chuyển sang phần mềm trung gian tiếp theo (tức là chuyển quyền kiểm soát cho trình xử lý tiếp theo trong chuỗi); /sprite.svg Để chuẩn bị nội dung tệp, tôi đặt kết quả của vào biến và gửi nó dưới dạng phản hồi với các tiêu đề được định cấu hình (loại nội dung và trạng thái 200 HTTP). getSpriteContent sprite Kết quả là tôi đã mô phỏng hành vi của tệp. Nhưng nếu các tập tin trong bị thay đổi, xóa hoặc thêm vào, chúng ta nên khởi động lại máy chủ để tạo nội dung sprite mới thông qua ; để làm điều này, tôi sẽ sử dụng thư viện xem tệp - . Hãy thêm trình xử lý chokidar vào mã: src/icons getSpriteContent chokidar import { Plugin, ResolvedConfig } from 'vite'; import chokidar from 'chokidar'; function myPlugin(): Plugin { let config: ResolvedConfig; let watcher: chokidar.FSWatcher; // Defined variable for chokidar instance. return { name: `my-plugin:serve`, apply: 'serve', async configResolved(_config) { config = _config; }, configureServer(server) { function reloadPage() { // Function that sends a signal to reload the server. server.ws.send({ type: 'full-reload', path: '*' }); } watcher = chokidar .watch('src/icons/*.svg', { // Watch src/icons/*.svg cwd: config.root, // Define project root path ignoreInitial: true, // Don't trigger chokidar on instantiation. }) .on('add', reloadPage) // Add listeners to add, modify, delete. .on('change', reloadPage) .on('unlink', reloadPage); return () => { server.middlewares.use(async (req, res, next) => { if (req.url !== '/sprite.svg') { return next(); } const sprite = getSpriteContent({ pattern, prefix, svgo, currentColor }); res.writeHead(200, { 'Content-Type': 'image/svg+xml, charset=utf-8', 'Cache-Control': 'no-cache', }); res.end(sprite); }); }; }, }; } Như bạn có thể thấy, API tạo plugin không thực sự phức tạp. Bạn chỉ cần tìm những hook từ Vite hoặc Rollup phù hợp với nhiệm vụ của mình. Trong ví dụ của tôi, tôi đang sử dụng từ Rollup.js (như tôi đã nói, nó được sử dụng để tạo gói) và từ Vite vì Rollup.js không có hỗ trợ máy chủ nhà phát triển gốc. writeBundle configureServer Trong trường hợp , nó rất đơn giản, chúng tôi lấy nội dung SVG sprite và đặt nó vào một tệp. Trong trường hợp của máy chủ dev, tôi bối rối tại sao tôi không thể làm như vậy; Tôi đã xem xét các plugin của các tác giả khác và tất cả họ đều làm như vậy. writeBundle Vì vậy, tôi sử dụng và thông qua đối số , tôi thêm phần mềm trung gian kích hoạt mọi yêu cầu đến máy chủ nhà phát triển bằng cách chặn yêu cầu . configureServer server sprite.svg Sử dụng móc Vite Như tôi đã đề cập trước đó, để tạo ra nhiều plugin hữu ích hơn, bạn cần khám phá các hook. Chúng được giải thích chi tiết trong tài liệu: https://vitejs.dev/guide/api-plugin#universal-hooks https://vitejs.dev/guide/api-plugin#vite-spec-hooks Cách đặt tên cho plugin Về cách đặt tên, Vite có một số quy ước dành cho plugin, vì vậy tốt nhất bạn nên kiểm tra nó trước khi hoàn thành. Dưới đây là một số điểm chính: Các plugin Vite phải có một tên duy nhất với tiền tố ; vite-plugin- Bao gồm từ khóa trong pack.json; vite-plugin Bao gồm một phần trong tài liệu plugin giải thích lý do tại sao nó là plugin chỉ dành cho Vite (ví dụ: nó sử dụng các hook plugin dành riêng cho Vite); Nếu plugin của bạn chỉ hoạt động với một khung cụ thể, hãy bao gồm tên của nó như một phần của tiền tố ( , , ). vite-plugin-vue- vite-plugin-react- vite-plugin-svelte- Cách xuất bản và chia sẻ plugin của bạn Nếu bạn quyết định xuất bản plugin của mình trong NPM, tôi khuyên bạn nên làm điều này vì chia sẻ kiến thức và kiến thức chuyên môn là nguyên tắc cơ bản của cộng đồng CNTT, thúc đẩy sự phát triển chung. Để tìm hiểu cách xuất bản và duy trì gói của bạn, hãy xem hướng dẫn của tôi → . Cách dễ nhất để tạo gói NPM Tôi cũng thực sự khuyên bạn nên gửi plugin của mình tới danh sách cộng đồng của vite - . Nhiều người đang tìm kiếm các plugin phù hợp nhất ở đó và đây sẽ là cơ hội tuyệt vời để đóng góp cho hệ sinh thái Vite! Quá trình gửi plugin của bạn ở đó rất đơn giản - chỉ cần đảm bảo bạn đáp ứng các điều khoản và tạo yêu cầu kéo. Bạn có thể tìm thấy danh sách các điều khoản . awesome-vite ở đây Nhìn chung, nó cần phải dành riêng cho Vite (không phải bản tổng hợp), nguồn mở và có tài liệu tốt. Chúc may mắn với các plugin của bạn!
