babel-plugin-import-bk-magic-vue/README.md

babel-plugin-import-bk-magic-vue

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