Как написать плагин Vite

Vue.js
Как написать плагин Vite

Я полагаю, что студенты, которые знают Vue3, знают, что Youda отказался от webpack и использовал Vite для создания проекта. Vite также поддерживает пользовательские плагины, но официальная документация по этой части еще не опубликована, я поискал в интернете и нашел статью о том, как писать плагины. Я перевел его, надеюсь, он вам поможет. Что ж, давайте посмотрим ниже! ps: я также пытался написать плагин vite: преобразовать md в строку,кодовый адрес.

Оригинальный адрес:Writing a vite plugin

Юда описал это такViteиз: "Родной браузерный ESimportsсервер разработки. Используйте браузер для разбораimports, компилировать и возвращать по запросу на стороне сервера, полностью пропуская концепцию упаковки, Сервер готов к работе. При этом не толькоVueТакже реализована файловая поддержка и горячее обновление, при этом скорость горячего обновления не будет замедляться по мере увеличения количества модулей. Для производственной среды можно использовать тот же кодrollupПакет. "

Сегодня давайте посмотрим, как написать простой плагин Vite,кодовый адрес.

Функционал плагина

Наш плагин будет автоматически генерировать маршруты vue-router на основе каталога компонентов Vue, это я изВозможности маршрутизации NuxtВдохновение от.

Наша структура каталогов:

src/
|-- pages/
    |-- about.vue
    |-- contact.vue

Автоматически сгенерированные маршруты:

[
  {
    name: 'about',
    path: '/about',
    component: '/src/pages/about.vue'
  },
  {
    name: 'contact',
    path: '/contact',
    component: '/src/pages/contact.vue'
  },
]

О Вите

Почему vue3 выбирает vite?

Студенты, которые не знают Vite, могут посмотретьVite официальное объяснение,или Слушай тебя, ЮсиFull Stack Radioобсуждение выше. Узнайте, что такое Vite и почему он существует.

По сравнению с Webpack время сборки Vite значительно сокращается. Попробуйте вите, я уверен, вы поймете, почему Йода выбрал его!

Концепция плагина Vite

На момент написания этой статьи официальной документации о том, как писать плагины Vite, не существует.

Таким образом, в настоящее время только вите, читая исходный код, чтобы получить представление о том, как писать плагины.

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

  • Сервер разработки (сервер разработки): Браузеры могут обрабатывать импорт модулей ES для файлов js.

но не может напрямую обрабатывать другие типы файловimport. Каждый раз, когда браузер встречает в кодеimportкогда, Он будет скомпилирован через сервер разработки Vite, а затем передан непосредственно в браузер.

Например:*.vueФайлы компилируются на сервере разработки перед отправкой в ​​браузер.

Этими импортами могут быть файлы javascript, vue, css. Возможны и другие типы файлов, но инструмент мутации должен быть указан в vite.

Вот почему сервер разработки Vite так полезен — он устраняет ограничения браузера.

  • накопительный производственный пакет: Для статического контента в производственных сборках нет сервера разработки vite. Итак, vite используетrollupУпакуйте код для производственной среды.

  • пользовательский блок(пользовательский блок): Иногда другие библиотеки, которые вы используете, могут добавлять пользовательские блоки в файлы vue, например.<docs>или<story>. Вы можете использовать Vite, чтобы указать, как обрабатываются пользовательские блоки.

Напишите наш плагин

Мы автоматически создадимvue-auto-routes.jsфайл, из которого экспортируется массив маршрутов.

Этот файл являетсяфиктивный файл, этопри разработке(для сервера разработки) иво время сборки(для сведения) динамически генерируется.

Наконец, мы импортируем массив маршрутов в код, и он готов к использованию.

Автоматически генерировать маршруты vue-router

Генерироватьvue-auto-routes.jsфайл, нам нужно проанализироватьsrc/pagesсодержание, и преобразовать его в какой-либоimportОператоры и массивы маршрутов.

Используйте встроенный в узелfsМодуль:

function parsePagesDirectory() {
  const files = fs
    .readdirSync('./src/pages')
    .map((f) => ({ name: f.split('.')[0], importPath: `/src/pages/${f}` }))

  const imports = files.map((f) => `import ${f.name} from '${f.importPath}'`)

  const routes = files.map(
    (f) => `{
        name: '${f.name}',
        path: '/${f.name}',
        component: ${f.name},
      }
      `,
  )

  return { imports, routes }
}

Эта функция возвращает два массива:

  • imports: import объявляет массив, например.import about from 'src/pages/about.vue'
  • routes: массив маршрутов, например."{ name: 'about', path: '/about', component: about }"

Помните, что теперь это струны,

Создать пустой плагин

Плагин Vite — это просто объект, мы можем сначала вернуть пустой объект.

Создайте файл js для использования в качестве плагинаplugin.js:

module.exports = function() {
 return {}
}

Затем вvite.config.jsИспользуйте так:

const viteAutoRoute = require('./plugin.js')

export default {
  plugins: [viteAutoRoute()],
}

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

Например: если вы хотите указать пользовательскую функцию маршрутизации, вы можете сделать этоviteAutoRoute({ pagesDir: './src/docs' })

среда разработки

Теперь давайте воспользуемся теми маршрутами, которые мы создали ранее.

Варианты использования плагина viteconfigureServer:

module.exports = function () {
  const { imports, routes } = parsePagesDirectory()

  const moduleContent = `
    ${imports.join('\n')}
    export const routes = [${routes.join(', \n')}]
  `

  const configureServer = [
    async ({ app }) => { // koa 的代码
      app.use(async (ctx, next) => {
        if (ctx.path.startsWith('/@modules/vue-auto-routes')) {
          ctx.type = 'js'
          ctx.body = moduleContent
        } else {
          await next()
        }
      })
    },
  ]
  
  return { configureServer }
}

Сначала создайте строкуmoduleContent, который содержит необходимое содержимое js-файла маршрута.

Затем мы создаемconfigureServerМассив промежуточного ПО на сервере vite dev.

Всякий раз, когда vite импортирует файл javascript или vue, он отправит запрос файла на свой сервер разработки, При необходимости выполните некоторое преобразование и отправьте его обратно в форме, которую может обработать браузер.

когда он сталкивается с чем-то вродеimport { routes } from 'vue-auto-routes', он спросит@/modules/vue-auto-routes.

Итак, что мы делаем, так это перехватываем этот запрос и возвращаем сгенерированныйmoduleContentbody и объявите его тип как js.

Наконец, мы ставим этоconfigureServerМассив добавляется к возвращаемому объекту для использования Vite. Увидев это, Vite объединяет промежуточное ПО из нашего списка (1 из 1) со своим собственным.

Теперь мы можем использовать эти динамически сгенерированные маршруты в нашем маршрутизаторе:

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes } from 'vue-auto-routes'
import App from './App.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
createApp(App).use(router).mount('#app')

Теперь мы можем запустить yarn dev, чтобы увидеть, как работает маршрутизация.http://localhost:3000/#/about🎉

Обратите внимание, что мы используемvue-router-nextскороVue 3маршрутизатор.

Производственная среда

Однако, когда мы запускаемyarn buildон не использует то, что мы только что сделалиconfigureServer, потому что в производстве он используетrollupСкомпилируйте вместо сервера разработки Vite.

Поэтому нам нужно добавить некоторую дополнительную конфигурацию, чтобы она правильно работала в производственной среде:

const virtual = require('@rollup/plugin-virtual')

module.exports = function () {
  // 这块是之前定义的 configureServer 代码

  const rollupInputOptions = {
    plugins: [virtual({ 'vue-auto-routes': moduleContent })],
  }

  return { configureServer, rollupInputOptions }
}

Здесь мы используем опцию плагина viterollupInputOptions. Это позволяет нам определить функциональность плагина для свертки.

Мы используем@rollup/plugin-virtualс именем модуля и пусть возвращает требуемый контент js.

По сути, он делает то же самое, что и сервер разработки.

Теперь наш автомаршрут работает как в локальной разработке, так и в продакшене.

Добавить кпользовательский блок

Отдельные страницы Vue могут захотеть предоставить дополнительные параметры маршрутизации.

Например, мы можем захотеть добавить дополнительные параметры к нашим маршрутам или использовать собственные имена маршрутов.

Чтобы реализовать эту функциональность, мы переопределимvue-cli-plugin-auto-routingизrouteКусок, чтобы сделать следующее в компоненте vue:

<route>
{
  "meta": {
    "requiresLogin": true,
  }
}
</route>

Для этого мы будем использоватьvueCustomBlockTransformsопции. Таким образом, вы можете сказать vite, что делать с пользовательскими блоками, когда он встречает файлы vue.

Это последняя функция, которую мы собираемся добавить, поэтому давайте рассмотрим ее как часть всего плагина:

const fs = require('fs')
const virtual = require('@rollup/plugin-virtual')

function parsePagesDirectory() {
  const files = fs
    .readdirSync('./src/pages')
    .map((f) => ({ name: f.split('.')[0], importPath: `/src/pages/${f}` }))

  const imports = files.map((f) => `import ${f.name} from '${f.importPath}'`)

  const routes = files.map(
    (f) => `{
        name: '${f.name}',
        path: '/${f.name}',
        component: ${f.name},
        ...(${f.name}.__routeOptions || {}),
      }
      `,
  )

  return { imports, routes }
}

module.exports = function () {
  const { imports, routes } = parsePagesDirectory()

  const moduleContent = `
    ${imports.join('\n')}
    export const routes = [${routes.join(', \n')}]
  `

  const configureServer = [
    async ({ app }) => {
      app.use(async (ctx, next) => {
        if (ctx.path.startsWith('/@modules/vue-auto-routes')) {
          ctx.type = 'js'
          ctx.body = moduleContent
        } else {
          await next()
        }
      })
    },
  ]

  const rollupInputOptions = {
    plugins: [virtual({ 'vue-auto-routes': moduleContent })],
  }

  const vueCustomBlockTransforms = {
    route: ({ code }) => {
      return `
        export default function (Component) {
          Component.__routeOptions = ${code}
        }
      `
    },
  }

  return { configureServer, rollupInputOptions, vueCustomBlockTransforms }
}

мы добавилиvueCustomBlockTransformsобъект, 该对象将键route(Наше имя блока), чтобы вернуться к функции js-файла виртуальной карты.

существуетvueCustomBlockTransformsдобавить дополнительные поля в__routeOptions, Это поле соответствует любому из наших пользовательских<route>Код, объявленный в блоке.

Затем мы генерируем код в маршруте（...(${f.name}.__routeOptions || {})）используйте этот код в .

Вот почему я в фиктивном файлеvue-auto-routesимпортировать компоненты в Теперь доступен прямой доступ__routeOptionsДобавлены поля.

Теперь мы можем использовать компонент vue page$route.meta.requiresLoginЛа!

конец

Надеюсь, вы понимаете, как работает Vite и как писать базовые плагины.

Увидимся в следующей статье 💗💗💗

Уровень ограничен, если есть ошибки в статье, пожалуйста, укажите на большие ребята, спасибо~!

В этой статье используетсяmdniceнабор текста

Категории