Подготовка к 2021 году: руководство по разработке плагинов Vite2

Vite
Подготовка к 2021 году: руководство по разработке плагинов Vite2

Автор этой статьи:Староста деревни Хуагошанян

Руководство по разработке плагина Vite2

img

Что такое плагин Vite

Используйте плагины Vite для расширения возможностей Vite, таких как анализ пользовательского ввода файлов, транспиляция кода перед его упаковкой или поиск сторонних модулей.

image-20210216214524914

Форма плагина Vite

ViteПлагин распространяется отRollupПодключаемый интерфейс, еще немногоViteУникальные опции.

Viteплагин этоиметь имя,Создать крючок(Построить КРЮК) илигенерировать хук(output generate hook)Объект.

image-20210219094649110

Если плагин необходимо настроить, он должен быть в форме опции получения плагина,Функция, которая возвращает объект плагина.

image-20210219094755835

Пример: Загрузка несуществующего виртуального модуля

Создайтеvite-plugin-my-example.js

export default function myExample () {
  return {
    name: 'my-example', // 名称用于警告和错误展示
    resolveId ( source ) {
      if (source === 'virtual-module') {
        return source; // 返回source表明命中，vite不再询问其他插件处理该id请求
      }
      return null; // 返回null表明是其他id要继续处理
    },
    load ( id ) {
      if (id === 'virtual-module') {
        return 'export default "This is virtual!"'; // 返回"virtual-module"模块源码
      }
      return null; // 其他id继续处理
    }
  };
}

крючок плагина

Универсальный крючок

При разработке,Vite dev serverСоздайте контейнер плагина в соответствии сRollupВызовите правила, которые создают хуки, чтобы запросить каждую функцию хука.

Следующий хук будет вызываться один раз при запуске сервера:

  • optionsзаменить или манипулироватьrollupОпции
  • buildStartначать создавать

Следующий хук будет вызываться каждый раз при запросе модуля:

  • resolveIdСоздайте пользовательскую функцию подтверждения, обычно используемую для обнаружения сторонних зависимостей.
  • loadСоздавайте собственные функции загрузки, которые можно использовать для возврата пользовательского содержимого.
  • transformМожет использоваться для преобразования содержимого загруженного модуля

Следующий хук будет вызываться один раз при выключении сервера:

уникальный крючок

  • config: изменить конфигурацию Vite
  • configResolved: конфигурация Vite подтверждена
  • configureServer: используется для настройки сервера разработки.
  • transformIndexHtml: используется для преобразования главной страницы.
  • Handlepdate: пользовательский вызов обновления HMR

Пример: Тест последовательности вызовов отбоя

export default function myExample () {
  // 返回的是插件对象
  return {
    name: 'hooks-order', 
    // 初始化hooks，只走一次
    options(opts) {
      console.log('options', opts);
    },
    buildStart() {
      console.log('buildStart');
    },
    // vite特有钩子
    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>/,
      //   `<title>Title replaced!</title>`
      // )
    },
    // 通用钩子
    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
    },
  };
}

Порядок вызова хука

image-20210218192306617

порядок плагинов

  • Псевдоним Обработка псевдонимов
  • Настройки пользовательского плагинаenforce: 'pre'
  • Основной плагин Vite
  • Плагин пользователя не установленenforce
  • Плагин сборки Vite
  • Настройки пользовательского плагинаenforce: 'post'
  • Плагины для создания постов Vite (минимизация, манифест, отчетность)

image-20210219092521002

Практика написания плагинов

Реализовать фиктивный сервер vite-plugin-mock

Идея реализации состоит в том, чтобы оснастить экземпляр сервера разработки промежуточным программным обеспечением, которое может хранить информацию о сопоставлении интерфейса конфигурации пользователя, заранее обрабатывать входной запрос, принимать на себя, если запрошенный URL-адрес соответствует таблице маршрутизации, и возвращать результат в соответствии с пользователем. -настроенный обработчик.

image-20210219094301985

Создайте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);
    },
  };
}

видеоурок

Сельский староста открыт весь Новый год, переполненный этой статьей и поддерживающими видео. Друзья, которые любят смотреть видео, приходят сюда, чтобы собраться:

[Подготовка к 2021 году] Руководство по разработке плагинов Vite2 «Непрерывное обновление»

Оригинальность не так проста, добро пожаловать, друзьяТройной + подписка, ваша поддержка - самая большая мотивация для меня продолжать ❤️

Поддержка исходного кода

Добро пожаловать в публичный аккаунт村长学前端самовывоз

Последующий творческий план

Для того, чтобы по-настоящему достичь мастерства и совершенства, нам еще нужно выучить еще несколько отличных плагинов, планирую сделать это позже:

  • vite-plugin-vue-i18nИзучение исходного кода и совместное использование

  • @vitejs/plugin-vueИзучение исходного кода и совместное использование

Всем нравится, обратите внимание, для дообучения.

Поддерживать нас

оvite2Это все, что касается написания плагина. Этот контент был сделан сверхурочно во время китайского Нового года. Друзья, поставьте лайк и поддержите его, хорошо?

Каждый может следоватьКоманда Хуагошань, мы будем продолжать обновлять лучший контент.

Категории