@dpapejs/vite-plugin-import-component

Modular import plugin for Vite, compatible with Element UI 2.X, Ant Design Vue, and so on.

Features

• ✅ Support single configuration object
• ✅ Support multiple configuration objects (array)
• ✅ Support component aliases (e.g., import { Button as ElButton })
• ✅ Support different style configurations (css, less, styleDir)
• ✅ Support custom library directory
• ✅ High test coverage (90%+)

Use

Install

npm i @dpapejs/vite-plugin-import-component -D
# OR
yarn add @dpapejs/vite-plugin-import-component -D

vite.config.js

Single configuration

import { defineConfig } from 'vite'
import usePluginImport from '@dpapejs/vite-plugin-import-component'

export default defineConfig({
  plugins: [
    ...// other plugins
    usePluginImport({
      libraryName: '@dpapejs/cmod-ui',
      libraryDirectory: 'es',
      type: 'js',
      style: true
    })
  ]
})

Multiple configurations

import { defineConfig } from 'vite'
import usePluginImport from '@dpapejs/vite-plugin-import-component'

export default defineConfig({
  plugins: [
    ...// other plugins
    usePluginImport([
      {
        libraryName: '@aicblock/aibui-vue',
        libraryDirectory: 'es',
        type: 'js',
        style: true
      },
      {
        libraryName: 'element-ui',
        libraryDirectory: 'lib',
        type: 'js',
        style: true
      },
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        type: 'js',
        style: true
      }
    ])
  ]
})

API

Configuration options

| Option | Type | Default | Description | | ------------------ | ---------------------------- | ------- | ------------------------------ | | libraryName | string | - | Component library name | | libraryDirectory | string | lib | Component directory | | type | 'style' \| 'js' | js | Component type | | style | boolean \| 'css' \| 'less' | true | Style import mode | | styleDir | boolean | false | Whether to use style directory |

Examples

Basic usage

// Input
import { Button } from '@dpapejs/cmod-ui'

// Output
import Button from '@dpapejs/cmod-ui/es/button/index.js'
import '@dpapejs/cmod-ui/es/button/style.js'

With aliases

// Input
import { Button as ElButton } from 'element-ui'

// Output
import ElButton from 'element-ui/lib/button/index.js'
import 'element-ui/lib/button/style.js'

With different style options

// style: 'css'
import Button from '@dpapejs/cmod-ui/es/button/index.js'
import '@dpapejs/cmod-ui/es/button/css.js'

// style: 'less'
import Button from '@dpapejs/cmod-ui/es/button/index.js'
import '@dpapejs/cmod-ui/es/button/less.js'

// style: true, styleDir: true
import Button from '@dpapejs/cmod-ui/es/button/index.js'
import '@dpapejs/cmod-ui/es/button/style/index.js'

Test Coverage

| Metric | Value | | ---------- | ------ | | Statements | 98.11% | | Branches | 92.68% | | Functions | 100% | | Lines | 100% |

LICENSE

MIT