1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/lihanspace-vite-plugin-inject-externals

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

vite-plugin-inject-externals

简体中文 | English

При упаковке vite указанный модуль импортируется из CDN вместо этого.

Тег скрипта и тег ссылки могут быть добавлены в указанное место.

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

npm package npm downloads/month npm minified size github release License

Установка

Установите плагин с помощью npm:

npm install --save-dev vite-plugin-inject-externals

Основное использование

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // Значение по умолчанию: 'head-prepend'
      // Пользовательское местоположение инъекции заменит соответствующий текст в index.html
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          global: 'Vue',
          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
        },
        {
          name: 'axios',
          global: 'axios',
          // Если есть name и global, но нет path и htmltag, глобальные переменные будут заменены напрямую, но тег script не будет добавлен
          // path: 'https://cdn.jsdelivr.net/npm/axios@0.22.0/dist/axios.min.js'
        },
        {
          name: 'md-editor-v3',
          global: 'MdEditorV3',
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/md-editor-v3.umd.js',
          injectTo: '<!-- example2 -->'
        },
        // Если есть путь, но нет global, будет добавлен тег link
        {
          name: 'md-editor-v3/lib/style.css',
          // Если есть имя, но нет глобального, импорт имени будет удалён, что применимо только к голым импортам (import 'md-editor-v3/lib/style.css')
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/style.css'
        }
      ]
    })
  ],
}

Результат

// dev
import { createApp } from 'vue'
import axios from 'axios'
import MdEditorV3 from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

createApp()
axios()
console.log(MdEditorV3)

// build
Vue.createApp()
axios()
console.log(MdEditorV3)
<!-- Inject CDN links -->
<script type="text/javascript" src="https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js"></script>

Расширенное использование

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // Значение по умолчанию: 'head-prepend'
      // Пользовательское местоположение инъекции заменит соответствующий текст в index.html
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          // Когда метод импорта — это голые импорты (import 'md-editor-v3/lib/style.css'), и есть имя ('md-editor-v3/lib/style.css'), но нет глобального, импорт будет удалён.
          // Когда метод импорта не является голыми импортами, и есть name и global, глобальные переменные

*Примечание: В данном тексте запроса присутствуют фрагменты кода на языке JavaScript, которые были сохранены без изменений.* ## InjectExternalsConfig

|   Название   |  Требуется |                                                                     Описание                                                                     |                             Тип                             |     По умолчанию      |
|:------------:|:----------:|:---------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------:|:--------------------:|
| command  |  `false`  | Вставляет HTML-тег при выполнении какой команды. Значение true указывает на то, что HTML-теги вставляются при выполнении команд build и serve |                       `'build' / true`                       |    `'build'`          |
| injectTo |  `false`  |                                                               Место вставки HTML-тегов                                                           | `'head' / 'body' / 'head-prepend' / 'body-prepend' / string` | `'head-prepend'`     |
| modules  |  `true`   |                                                             Конфигурация модулей                                                            |                  `InjectExternalsModule[]`                   |       `[]`            |

### InjectExternalsModule

|   Название   | Требуется |                                              Описание                                               |  Тип    |                    По умолчанию       |
|:------------:|:--------:|:-----------------------------------------------------------------------------------------------:|:---------:|:----------------------------------:|
|   name   | `false`  |                                          Имя модуля                                           | `string`  |
|  global  | `false`  |                          Глобальные переменные, соответствующие модулю                           | `string`  |
|   path   |  `true`  | Ссылка CDN на ресурсы JS или CSS. Если нет global, это означает, что это ресурс CSS. | `string`  |
| htmlTag  |  `true`  |                         Пользовательские HTML-теги, приоритет выше, чем у path.                         | `HtmlTag` |
| injectTo | `false`  |                                 Место вставки HTML-тегов                                 | `string`  | `InjectExternalsConfig.injectTo` | 

#### HtmlTag

| Название  | Требуется |                         Описание                          |  Тип   | По умолчанию |
|:---------|:--------:|:-----------------------------------------------------:|:--------:|:----------:|
|  tag  |  `true`  |                      Имя тега                        | `string` |
| attrs | `false`  | Атрибуты (`{ 'Имя атрибута': 'Значение атрибута' }`) | `object` |

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Во время сборки Vite, указанные модули будут импортированы из CDN. Теги script и link можно вставить в указанное место. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Язык

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/lihanspace-vite-plugin-inject-externals.git
git@api.gitlife.ru:oschina-mirror/lihanspace-vite-plugin-inject-externals.git
oschina-mirror
lihanspace-vite-plugin-inject-externals
lihanspace-vite-plugin-inject-externals
main