- A vite plugin for import ui library component style automatic.
- It can also import library like lodash on demand.
import { forEach } from 'lodash'
forEach([1,2], console.log)to
import forEach from 'lodash/forEach'
forEach([1,2], console.log)import { Progress } from 'vant'to
import { Progress } from 'vant'
import 'vant/es/progress/style/index.js'npm i vite-plugin-imp -D
or
yarn add vite-plugin-imp -D
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [vitePluginImp(config)]
})config interface is ImpConfig:
export interface LibItem {
/**
* library name
*/
libName: string
/**
* component style file path
*/
style: (name: string) => string | string[] | boolean
/**
* default `es`
*/
libDirectory?: string
/**
* whether convert component name from camel to dash
*/
camel2DashComponentName?: boolean
/**
* whether replace old import statement, default `command === 'build'`,
* that means in vite serve default to `false`, in vite build default to `ture`
*/
replaceOldImport?: boolean
}
interface ImpConfig {
libList: libItem[]
/**
* exclude the library from defaultLibList
*/
exclude?: string[]
/**
* when a style path is not found, don’t show error and give a warning.
* Default: command === 'serve'
*/
ignoreStylePathNotFound?: boolean
/**
* By default `vite-plugin-imp` ignores all files inside node_modules.
* You can enable this option to avoid unexpected untranspiled code from third-party dependencies.
*
* Transpiling all the dependencies could slow down the build process, though.
* If build performance is a concern, you can explicitly transpile only some of the dependencies
* by passing an array of package names or name patterns to this option.
*
* Default: false
*/
transpileDependencies?: boolean | Array<string | RegExp>
}// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'lodash',
libDirectory: '',
camel2DashComponentName: false
},
{
libName: 'antd',
style(name) {
// use less
return `antd/es/${name}/style/index.js`
}
},
]
})
]
})- antd-mobile
- antd
- ant-design-vue
- @arco-design/web-react
- @arco-design/web-vue
- element-plus
- element-ui
- lodash
- underscore
- vant
- view ui
- vuetify
You should put these built-in supported libraries in your
dependenciesfield in package.json.
If your project is using libraries that mentioned above, you just need use it like:
export default defineConfig({
plugins: [
// ...
vitePluginImp()
]
})If you want to support a library built-in, feel free to open a issue.
just use the component like below, component style will be auto injected.
import { defineComponent } from 'vue'
import { Progress } from 'vant'
import { ElButton } from 'element-plus'
export default defineComponent({
setup() {
return () => {
return (
<div>
<Progress percentage={3} />
<ElButton>element-plus button</ElButton>
</div>
)
}
}
})You can set camel2DashComponentName to false to disable transfer from camel to dash:
vitePluginImp({
libList: [
{
libName: 'custom-lib',
camel2DashComponentName: false, // default true
style: (name) => {
return`custom-lib/lib/${name}/index.css`
}
}
]
})// vite.config.js
const vitePluginImpCreator = require('vite-plugin-imp')
const vitePluginImp = vitePluginImpCreator({
optimize: true,
libList: [
{
libraryName: 'vant',
style: (name) => {
return `vant/es/${name}/index.css`
}
},
{
libraryName: 'element-plus',
style: (name) => {
return`element-plus/lib/theme-chalk/${name}.css`
}
}
]
})
module.exports = {
plugins: [vitePluginImp]
}