# vite-plugin-imp
> A vite plugin for import style automatic
Latest version **2.4.0** (published 2023-04-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install vite-plugin-imp
pnpm add vite-plugin-imp
yarn add vite-plugin-imp
bun add vite-plugin-imp
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.4.0 |
| Published | 2023-04-24 |
| First published | 2021-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 44.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | psaren |
| Maintainers | psaren007 |
| Keywords | vite plugin imp |
## Links
- npm: https://www.npmjs.com/package/vite-plugin-imp
- Repository: https://github.com/onebay/vite-plugin-imp
- Homepage: https://github.com/onebay/vite-plugin-imp#readme
- Issues: https://github.com/onebay/vite-plugin-imp/issues
- npm.io page: https://npm.io/package/vite-plugin-imp
## Dependencies (7)
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [param-case](https://npm.io/package/param-case.md) ^3.0.4
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.12.10
- [pascal-case](https://npm.io/package/pascal-case.md) ^3.1.2
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.12.11
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.12.12
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.12.11
## Alternatives
- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads
## Recent versions
- 2.4.0 (latest) — 2023-04-24
- 2.3.1 — 2022-10-28
- 2.3.0 — 2022-08-24
- 2.2.0 — 2022-06-08
- 2.1.8 — 2022-04-24
- 2.1.7 — 2022-03-31
- 2.1.6 — 2022-02-25
- 2.1.5 — 2022-02-23
- 2.1.4 — 2022-02-22
- 2.1.3 — 2022-01-11
- 2.1.2 — 2021-12-29
- 2.1.1 — 2021-12-27
- 2.1.0 — 2021-12-27
- 2.0.11 — 2021-12-11
- 2.0.10 — 2021-10-31
- … 12 more at https://npm.io/package/vite-plugin-imp/versions
## README
# vite-plugin-imp
- A vite plugin for import ui library component style automatic.
- It can also import library like lodash on demand.
``` js
import { forEach } from 'lodash'
forEach([1,2], console.log)
```
to
```js
import forEach from 'lodash/forEach'
forEach([1,2], console.log)
```
``` js
import { Progress } from 'vant'
```
to
``` js
import { Progress } from 'vant'
import 'vant/es/progress/style/index.js'
```
## install
```
npm i vite-plugin-imp -D
```
or
```
yarn add vite-plugin-imp -D
```
## Usage
``` js
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [vitePluginImp(config)]
})
```
config interface is ImpConfig:
``` ts
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
}
```
## More libraries usage
```js
// 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`
}
},
]
})
]
})
```
## Built-in Support popular library
- [antd-mobile](./src/resolvers/antd-mobile.ts)
- [antd](./src/resolvers/antd.ts)
- [ant-design-vue](./src/resolvers/antdv.ts)
- [@arco-design/web-react](./src/resolvers/arco-design-react.ts)
- [@arco-design/web-vue](./src/resolvers/arco-design-vue.ts)
- [element-plus](./src/resolvers/element-plus.ts)
- [element-ui](./src/resolvers/element-ui.ts)
- [lodash](./src/resolvers/lodash.ts)
- [underscore](./src/resolvers/underscore.ts)
- [vant](./src/resolvers/vant.ts)
- [view ui](./src/resolvers/view-ui.ts)
- [vuetify](./src/resolvers/vuetify.ts)
> You should put these built-in supported libraries in your `dependencies` field in package.json.
If your project is using libraries that mentioned above, you just need use it like:
```ts
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.
``` tsx
import { defineComponent } from 'vue'
import { Progress } from 'vant'
import { ElButton } from 'element-plus'
export default defineComponent({
setup() {
return () => {
return (
)
}
}
})
```
You can set camel2DashComponentName to false to disable transfer from camel to dash:
``` ts
vitePluginImp({
libList: [
{
libName: 'custom-lib',
camel2DashComponentName: false, // default true
style: (name) => {
return`custom-lib/lib/${name}/index.css`
}
}
]
})
```
## plugin V1.x (No more updates) Usage
``` js
// 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]
}
```
---
_Source: https://npm.io/package/vite-plugin-imp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._