vite-plugin-ultimate-import

按需导入插件 (带缓存优化)，风格极度类似babel-plugin-import

安装

npm install vite-plugin-import-ultimate -D

options

/**
 * 终极版按需导入插件 (带缓存优化)
 * @param {Object} options
 * @param {string} options.libraryName - 库名 (如 'antd')
 * @param {string} options.libraryDirectory - 组件目录 (如 'es' 或 'lib')
 * @param {boolean|string} [options.style] - 样式配置: true | 'css' | false
 * @param {boolean} [options.camel2DashComponentName=true] - 是否转换组件名大小写
 * @param {Function} [options.customName] - 自定义路径生成函数
 * @param {boolean} [options.debug] - 启用调试日志
 * @param {number} [options.cacheTTL=3600] - 缓存存活时间(秒)
 */

使用示例

// vite.config.js
import ultimateImport from 'vite-plugin-import-ultimate'

export default {
  plugins: [
    ultimateImport({
      libraryName: 'antd',
      libraryDirectory: 'es',
      camel2DashComponentName: false,
      customName: (name, formattedName) => {
        return `antd/es/${formattedName}`
      },
      debug: true,
      cacheTTL: 3600
    })
  ]
}

转换示例

Ant Design 组件转换

原始导入:

import { Button, DatePicker, Form } from 'antd'

转换后:

import Button from 'antd/es/button'
import DatePicker from 'antd/es/date-picker'
import Form from 'antd/es/form'

带样式的转换 (style: true)

原始导入:

import { Button, Input } from 'antd'

转换后:

import Button from 'antd/es/button'
import 'antd/es/button/style'
import Input from 'antd/es/input'
import 'antd/es/input/style'

CSS 样式转换 (style: 'css')

原始导入:

import { Card, Modal } from 'antd'

转换后:

import Card from 'antd/es/card'
import 'antd/es/card/style/css'
import Modal from 'antd/es/modal'
import 'antd/es/modal/style/css'

别名导入转换

原始导入:

import { Button as AntButton, Input as AntInput } from 'antd'

转换后:

import AntButton from 'antd/es/button'
import AntInput from 'antd/es/input'

Element Plus 组件转换

配置:

ultimateImport({
  libraryName: 'element-plus',
  libraryDirectory: 'es',
  style: 'css',
  camel2DashComponentName: true
})

原始导入:

import { ElButton, ElDatePicker } from 'element-plus'

转换后:

import ElButton from 'element-plus/es/el-button'
import 'element-plus/es/el-button/style/css'
import ElDatePicker from 'element-plus/es/el-date-picker'
import 'element-plus/es/el-date-picker/style/css'

自定义路径转换

配置:

ultimateImport({
  libraryName: 'my-ui-lib',
  customName: (name, formattedName) => {
    return `my-ui-lib/components/${formattedName}/index`
  },
  style: true
})

原始导入:

import { MyButton, MyCard } from 'my-ui-lib'

转换后:

import MyButton from 'my-ui-lib/components/my-button/index'
import 'my-ui-lib/components/my-button/index/style'
import MyCard from 'my-ui-lib/components/my-card/index'
import 'my-ui-lib/components/my-card/index/style'