代码拉取完成,页面将自动刷新
简体中文 | English
在vite打包时将指定的包改为从CDN引入。
script标签和link标签可以注入到指定位置。
减少构建时间,并提高生产环境中页面加载速度。
通过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 -->'
},
// 如果有path, 但是没有global, 会注入link标签
{
name: 'md-editor-v3/lib/style.css',
// 如果有name,但是没有global,会删除掉name的导入,仅适用于裸导入(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)
<!-- 注入CDN链接 -->
<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'),并且有name('md-editor-v3/lib/style.css')但是没有global,会删除导入
// 当导入方式不是裸导入时,并且有name和global,会替换全局变量
global: 'Vue',
// 有path时,如果name和global, 会注入script标签
// 有path时, 如果没有global, 会注入link标签
path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js',
// 自定义html标签,优先级比path高
htmlTag: {
tag: 'script',
attrs: {
type: 'text/javascript',
crossorigin: '',
src: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
}
},
// 如果module没有injectTo, 默认上层的injectTo
injectTo: '<!-- Custom1 -->'
}
]
})
],
}
Name | Required | Desc | Type | Default |
---|---|---|---|---|
command | false |
在运行哪个命令时注入html标签,build表示在打包时注入,true表示build和serve命令都注入 | 'build' / true |
'build' |
injectTo | false |
生成的html标签注入到什么位置 | 'head' / 'body' / 'head-prepend' / 'body-prepend' / string |
'head-prepend' |
modules | true |
模块配置 | InjectExternalsModule[] |
[] |
Name | Required | Desc | Type | Default |
---|---|---|---|---|
name | false |
模块名 | string |
|
global | false |
全局变量 | string |
|
path | false |
js或者css资源的cdn链接,如果没有global,表示是css资源 | string |
|
htmlTag | false |
自定义html标签,优先级比path高 | HtmlTag |
|
injectTo | false |
生成的html标签注入到什么位置 | string |
InjectExternalsConfig.injectTo |
Name | Required | Desc | Type | Default |
---|---|---|---|---|
tag | true |
标签名 | string |
|
attrs | false |
属性({ 属性名: 属性值 } ) |
object |
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型