vite-plugin-inject-externals
简体中文 | English
При упаковке vite указанный модуль импортируется из CDN вместо этого.
Тег скрипта и тег ссылки могут быть добавлены в указанное место.
Сократите время сборки и увеличьте скорость загрузки страниц в производственных средах.
Установите плагин с помощью 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 )