vite-plugin-imp

• A vite plugin for import ui library component style automatic.
• It can also import library like lodash on demand.

1import { forEach } from 'lodash'
2
3forEach([1,2], console.log)

to

1import forEach from 'lodash/forEach'
2
3forEach([1,2], console.log)

---

1import { Progress } from 'vant'

to

1import { Progress } from 'vant'
2import 'vant/es/progress/style/index.js'

install

npm i vite-plugin-imp -D

or

yarn add vite-plugin-imp -D

Usage

1import { defineConfig } from 'vite'
2import vitePluginImp from 'vite-plugin-imp'
3export default defineConfig({
4  plugins: [vitePluginImp(config)]
5})

config interface is ImpConfig:

1export interface LibItem {
2  /**
3   * library name
4   */
5  libName: string
6  /**
7   * component style file path
8   */
9  style: (name: string) => string | string[] | boolean
10  /**
11   * default `es`
12   */
13  libDirectory?: string
14  /**
15   * whether convert component name from camel to dash
16   */
17  camel2DashComponentName?: boolean
18  /**
19   * whether replace old import statement, default `command === 'build'`,
20   * that means in vite serve default to `false`, in vite build default to `ture`
21   */
22  replaceOldImport?: boolean
23}
24
25interface ImpConfig {
26  libList: libItem[]
27  /**
28   * exclude the library from defaultLibList
29   */
30  exclude?: string[]
31  /**
32   * when a style path is not found, don’t show error and give a warning. 
33   * Default: command === 'serve'
34   */
35  ignoreStylePathNotFound?: boolean
36  /**
37   * By default `vite-plugin-imp` ignores all files inside node_modules. 
38   * You can enable this option to avoid unexpected untranspiled code from third-party dependencies.
39   * 
40   * Transpiling all the dependencies could slow down the build process, though. 
41   * If build performance is a concern, you can explicitly transpile only some of the dependencies 
42   * by passing an array of package names or name patterns to this option.
43   * 
44   * Default: false
45   */
46  transpileDependencies?: boolean | Array<string | RegExp>
47}

More libraries usage

1// vite.config.js
2import { defineConfig } from 'vite'
3import vue from '@vitejs/plugin-vue'
4import vitePluginImp from 'vite-plugin-imp'
5
6export default defineConfig({
7  plugins: [
8    // ...
9    vitePluginImp({
10      libList: [
11        {
12          libName: 'lodash',
13          libDirectory: '',
14          camel2DashComponentName: false
15        },
16        {
17          libName: 'antd',
18          style(name) {
19            // use less
20            return `antd/es/${name}/style/index.js`
21          }
22        },
23      ]
24    })
25  ]
26})

Built-in Support popular library

• antd-mobile
• antd
• ant-design-vue
• @arco-design/web-react
• @arco-design/web-vue
• element-plus
• element-ui
• lodash
• underscore
• vant
• view ui
• vuetify

If your project is using libraries that mentioned above, you just need use it like:

1export default defineConfig({
2  plugins: [
3    // ...
4    vitePluginImp()
5  ]
6})

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.

1import { defineComponent } from 'vue'
2import { Progress } from 'vant'
3import { ElButton } from 'element-plus'
4
5export default defineComponent({
6  setup() {
7    return () => {
8      return (
9        <div>
10          <Progress percentage={3} />
11          <ElButton>element-plus button</ElButton>
12        </div>
13      )
14    }
15  }
16})

You can set camel2DashComponentName to false to disable transfer from camel to dash:

1vitePluginImp({
2  libList: [
3    {
4      libName: 'custom-lib',
5      camel2DashComponentName: false, // default true
6      style: (name) => {
7        return`custom-lib/lib/${name}/index.css`
8      }
9    }
10  ]
11})

plugin V1.x (No more updates) Usage

1// vite.config.js
2const vitePluginImpCreator = require('vite-plugin-imp')
3
4const vitePluginImp = vitePluginImpCreator({
5  optimize: true,
6  libList: [
7    {
8      libraryName: 'vant',
9      style: (name) => {
10        return `vant/es/${name}/index.css`
11      }
12    },
13    {
14      libraryName: 'element-plus',
15      style: (name) => {
16        return`element-plus/lib/theme-chalk/${name}.css`
17      }
18    }
19  ]
20})
21
22module.exports = {
23  plugins: [vitePluginImp]
24}
25