# babel-plugin-import-bk-magic-vue

> babel-plugin-import-bk-magic-vue

Latest version **2.1.11** (published 2022-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-import-bk-magic-vue
pnpm add babel-plugin-import-bk-magic-vue
yarn add babel-plugin-import-bk-magic-vue
bun add babel-plugin-import-bk-magic-vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.11 |
| Published | 2022-11-10 |
| First published | 2019-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 86.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bkfe |
| Maintainers | ielgnaw, blueking, sundytt |
| Keywords | blueking, babel-plugin, bk-magic-vue, bk-magic |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-import-bk-magic-vue
- npm.io page: https://npm.io/package/babel-plugin-import-bk-magic-vue

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.1.11 (latest) — 2022-11-10
- 2.1.10 — 2020-11-24
- 2.1.0 — 2020-11-24
- 2.0.14 — 2020-11-09
- 2.0.13 — 2020-03-18
- 2.0.12 — 2020-02-18
- 2.0.11 — 2019-10-31
- 2.0.10 — 2019-07-02
- 2.0.9 — 2019-06-13
- 2.0.8 — 2019-06-13
- 2.0.7 — 2019-06-09
- 2.0.6 — 2019-06-09
- 2.0.5 — 2019-05-21
- 2.0.4 — 2019-05-20
- 2.0.3 — 2019-05-20
- … 5 more at https://npm.io/package/babel-plugin-import-bk-magic-vue/versions

## README

babel-plugin-import-bk-magic-vue
===
[bk-magic-vue](https://www.npmjs.com/package/bk-magic-vue) 的辅助加载插件，这个插件主要作用是提供一个简化的语法糖，让组件的使用者在引用组件时只需要 `import` 组件即可同时引入组件和组件的样式。

我们可以使用 `importSpecifier` 格式和 `importDefaultSpecifier` 来引用组件。无论何种方式引入组件，均会自动引入组件的样式以及组件库通用的样式 (common.min.css)以及组件本身的样式，无需开发者再手动引入样式。

配置
---
在项目的 `.babelrc` 文件中 `plugins` 增加配置
```js
// baseLibName 是 bk-magic-vue 组件库的 package name，默认值为 bk-magic-vue
{
    "presets": ...,
    "plugins": [
        ...
        ["import-bk-magic-vue", {
            "baseLibName": "bk-magic-vue"
        }]
    ]
}
```

配置完成后，使用 `bk-magic-vue` 组件库就可按如下方式使用：


```js
// importSpecifier 方式
import { bkDropdownMenu } from 'bk-magic-vue'
import { bkDatePicker, bkOptionGroup } from 'bk-magic-vue'
import { bkBadge as badge, bkDialog as dialog, bkLoading as loading } from 'bk-magic-vue'
// locale, lang, localeMixin 是 i18n 的辅助函数，引入这三个时，不会引入对应的样式
import { locale, lang, localeMixin } from 'bk-magic-vue'
```

```js
// importDefaultSpecifier 方式
import bkRadio from 'bk-magic-vue/lib/radio'
import bkTimePicker from 'bk-magic-vue/lib/time-picker'

export default {
    components: {
        bkRadio,
        bkTimePicker
    }
}
console.log(bkRadio)
console.log(bkTimePicker)
```

```js
// 全量引入，会同时引入全量 css
import bkMagicVue from 'bk-magic-vue'
```


Test
---
    npm test

Coverage
---

    npm run coverage

ES6 Compile
---

    npm run compile

ES6 Compile Watch
---

    npm run watch

---
_Source: https://npm.io/package/babel-plugin-import-bk-magic-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._