@lough/vite-plugin-import
An on-demand import plug-in that is exclusive to Vite.
Install
npm i @lough/vite-plugin-import -D
or
yarn add @lough/vite-plugin-import -D
Usage
配置会按层级往下兜底
-
libName
预设配置:presetLibConfig
=>presetConfig
=>defaultConfig
=> 插件 -
libConfig
自定义配置:customConfig
=>presetConfig
=>defaultConfig
=> 插件
presetLibConfig 预设库配置
插件内置了
antd
以及@lyrical/react
的预设库配置
import { defineConfig } from 'vite'
import loughVitePluginImport from '@lough/vite-plugin-import'
export default defineConfig({
plugins: [
loughVitePluginImport({
libList: ['antd', '@lyrical/react']
})
]
})
presetConfig 预设配置
可以统一预设配置
import { defineConfig } from 'vite'
import loughVitePluginImport from '@lough/vite-plugin-import'
export default defineConfig({
plugins: [
loughVitePluginImport({
presetConfig: {
style: {
transform: ({ name, directory, importComponentName }) =>
`${name}/${directory}/components/${importComponentName}/index.css`
}
},
libList: ['null']
})
]
})
defaultConfig 默认配置
没有预设库配置以及预设配置的参数将使用默认配置
import { defineConfig } from 'vite'
import loughVitePluginImport from '@lough/vite-plugin-import'
export default defineConfig({
plugins: [
loughVitePluginImport({
libList: ['null']
})
]
})
customConfig 自定义配置
除了一系列兜底配置处理,还可以自定义特殊处理
import { defineConfig } from 'vite'
import loughVitePluginImport from '@lough/vite-plugin-import'
export default defineConfig({
plugins: [
loughVitePluginImport({
libList: [
{
name: 'antd',
namedType: map => map['dash-named']
},
{
name: '@lyrical/react',
directory: 'es/components'
}
]
})
]
})
高级的
高级属性可进行复杂的计算,例如:屏蔽单一库等
import { defineConfig } from 'vite'
import loughVitePluginImport from '@lough/vite-plugin-import'
export default defineConfig({
plugins: [
loughVitePluginImport(
{
name: 'antd',
namedType: map => map['dash-named'],
component: false
},
{
libList: [
{
name: '@lyrical/react',
component: {
transform: ({ name, directory, importComponentName }) =>
`${name}/${directory}/components/${importComponentName}`
},
style: {
transform: ({ name, directory, importComponentName }) =>
`${name}/${directory}/components/${importComponentName}/style`,
excludeNotExistFile: true
}
}
]
}
)
]
})
Interface
配置都有类型提示,这里不详细描述了,详情看类型源文件
lib/typings/index.d.ts
/**
* 引入组件配置
*/
export interface IComponentConfig extends ILibConfig {
/**
* 引入组件名称
*/
importComponentName: string
/**
* 引入文件使用组件名称 (因为可能重命名)
*/
localComponentName: string
}
/**
* 库处理组件配置
*/
export interface ILibComponentConfig {
/**
* 组件引入地址转换
* @param config 库组件配置
* @default ({name, directory, importComponentName}) => `${name}/${directory}/${importComponentName}`
*/
transform: (config: Omit<IComponentConfig, 'component'>) => string
}
/**
* 库处理样式配置
*/
export interface ILibStyleConfig {
/**
* 样式引入地址转换
* @param config 库组件配置
* @default ({name, directory, importComponentName}) => `${name}/${directory}/${importComponentName}/style`
*/
transform: (config: Omit<IComponentConfig, 'style'>) => string
/**
* 排除不存在文件
* @default true
*/
excludeNotExistFile?: boolean
}
/**
* 库配置
*/
export interface ILibConfig {
/**
* 库名称
*/
name: string
/**
* 库目录
* @default 'es'
*/
directory?: string
/**
* 命名类型
* @default 'BigHumpNamed'
*/
namedType?: NamedTypeFuncMapOrMap
/**
* 组件配置
*/
component?: boolean | ILibComponentConfig
/**
* 样式配置
*/
style?: boolean | ILibStyleConfig
}
/**
* 插件配置
*/
export interface IPluginConfig {
/**
* 默认设置
*/
presetConfig?: Omit<ILibConfig, 'name'>
/**
* 库列表
*/
libList:
| Array<ILibConfig | FuncMap<typeof PRESET_LIB_CONFIG, PRESET_LIB_CONFIG>>
| Array<ILibConfig | keyof typeof PRESET_LIB_CONFIG>
| Array<ILibConfig | string>
}