The author: Flower flower poplar village head

Vite2 plug-in development guide

What is the Vite plug-in

You can use the Vite plug-in to extend Vite capabilities, such as parsing user-defined file input, translating code before packaging it, or finding third-party modules.

Vite plugin form

The Vite plugin extends the Rollup plugin interface with additional Vite specific options.

A Vite plug-in is an object that has a name, builds hooks, or outputs generate hooks.

If a plug-in needs to be configured, it should take the form of a function that takes the plug-in options and returns the plug-in object.

Example: Load a non-existent virtual module

Create vite – plugin – my – example. Js

export default function myExample () {
  return {
    name: 'my-example'.// The name is used for warnings and error presentations
    resolveId ( source ) {
      if (source === 'virtual-module') {
        return source; // Returning source indicates a hit, and Vite no longer asks other plug-ins to handle the ID request
      }
      return null; // Return null to indicate that it is another ID to continue processing
    },
    load ( id ) {
      if (id === 'virtual-module') {
        return 'export default "This is virtual!" '; // Return the source code of the "virtual-module" module
      }
      return null; // Other ids continue processing}}; }Copy the code

The plugin hooks

General hook

At development time, Vite Dev Server creates a plug-in container that requests hook functions according to the rules for creating hooks in the Rollup call.

The following hooks are called once when the server starts:

  • optionsReplacement or manipulationrollupoptions
  • BuildStart starts building

The following hooks are called every time there is a module request:

  • ResolveId creates a custom validation function, commonly used to locate third-party dependencies
  • Load creates a custom load function that can be used to return custom content
  • Transform can be used to transform the loaded module content

The following hooks are called once when the server is shut down:

  • buildEnd
  • closeBundle

Special hooks

  • Config: Modifies the Vite configuration
  • ConfigResolved: Confirm the Vite configuration
  • ConfigureServer: Used to configure the Dev Server
  • TransformIndexHtml: Used to transform host pages
  • HandleHotUpdate: called when a custom HMR update is performed

Example: Hook calls sequential tests

export default function myExample () {
  // The plugin object is returned
  return {
    name: 'hooks-order'.// Initialize hooks, only once
    options(opts) {
      console.log('options', opts);
    },
    buildStart() {
      console.log('buildStart');
    },
    // Vite has unique hooks
    config(config) {
      console.log('config', config);
      return{}},configResolved(resolvedCofnig) {
      console.log('configResolved');
    },
    configureServer(server) {
      console.log('configureServer');
      // server.app.use((req, res, next) => {
      // // custom handle request...
      // })
    },
    transformIndexHtml(html) {
      console.log('transformIndexHtml');
      return html
      // return html.replace(
      // /(.*?) <\/title>/,
      // `Title replaced! `
      // )
    },
    // Generic hook
    resolveId ( source ) {
      if (source === 'virtual-module') {
        console.log('resolvedId', source);
        return source; 
      }
      return null; 
    },
    load ( id ) {
      if (id === 'virtual-module') {
        console.log('load');
        return 'export default "This is virtual!" ';
      }
      return null;
    },
    transform(code, id) {
      if (id === 'virtual-module') {
        console.log('transform');
      }
      return code
    },
  };
}
Copy the code

Hook call order

Plug-in order

  • Alias handling Alias
  • User plug-in Settingsenforce: 'pre'
  • Vite core plug-in
  • The user plug-in is not configuredenforce
  • Vite builds plug-ins
  • User plug-in Settingsenforce: 'post'
  • Vite build post-plugins (Minify, Manifest, Reporting)

Plug-in writing practice

Implement a mock server vite-plugin-mock

The implementation idea is to configure a middleware for the development server instance, which can store the user configuration interface mapping information and process the input request in advance. If the URL of the request matches the routing table, it will take over and return the result according to the user configuration handler.

Creating plugins/vite – plugin – mock. Js

import path from 'path'

let mockRouteMap = {};

function matchRoute(req) {
  let url = req.url;
  let method = req.method.toLowerCase();
  let routeList = mockRouteMap[method];

  return routeList && routeList.find((item) = > item.path === url);
}

function createRoute(mockConfList) {
  mockConfList.forEach((mockConf) = > {
    let method = mockConf.type || 'get';
    let path = mockConf.url;
    let handler = mockConf.response;
    let route = { path, method: method.toLowerCase(), handler };
    if(! mockRouteMap[method]) { mockRouteMap[method] = []; }console.log('create mock api: ', route.method, route.path);
    mockRouteMap[method].push(route);
  });
}

function send(body) {
  let chunk = JSON.stringify(body);
  // Content-Length
  if (chunk) {
    chunk = Buffer.from(chunk, 'utf-8');
    this.setHeader('Content-Length', chunk.length);
  }
  // content-type
  this.setHeader('Content-Type'.'application/json');
  // status
  this.statusCode = 200;
  // respond
  this.end(chunk, 'utf8');
}
export default function (options = {}) {
  options.entry = options.entry || './mock/index.js';


  if(! path.isAbsolute(options.entry)) { options.entry = path.resolve(process.cwd(), options.entry); }return {
    configureServer: function ({ app }) {
      const mockObj = require(options.entry);
      createRoute(mockObj);

      const middleware = (req, res, next) = > {
        let route = matchRoute(req);

        if (route) {
          console.log('mock request', route.method, route.path);
          res.send = send;
          route.handler(req, res);
        } else{ next(); }}; app.use(middleware); }}; }Copy the code

Video tutorial

The village head has no rest for the New Year.

Vite2 Plugin Development Guide “In constant Update”

Original is not easy, you are welcome to three small partners + attention, your encouragement is the biggest power I insist on ❤️

Form a complete set of source code

Welcome to pay attention to the public number village head to learn from the front

Follow-up Creation Plan

In order to truly achieve mastery and proficiency, we still need to learn more excellent plug-ins, and I plan to do some later:

  • Vite-plugin – VUe-i18n source code to learn to share

  • @vitejs/plugin- Vue source code to learn to share

Give it a thumbs up and follow it for further study.

To support our

Write about vite2 plug-in said here, this content is the Chinese New Year to work overtime to do, small partners point a praise 👍 encourage once, ok?

You can follow the flower and Fruit Mountain team, we will continue to update the best content.