babel-plugin-import-bk-magic-vue

bk-magic-vue 的辅助加载插件，这个插件主要作用是提供一个简化的语法糖，让组件的使用者在引用组件时只需要 import 组件即可同时引入组件和组件的样式。

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

配置

在项目的 .babelrc 文件中 plugins 增加配置

// baseLibName 是 bk-magic-vue 组件库的 package name，默认值为 bk-magic-vue
{
    "presets": ...,
    "plugins": [
        ...
        ["import-bk-magic-vue", {
            "baseLibName": "bk-magic-vue"
        }]
    ]
}

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

// 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'

// 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)

// 全量引入，会同时引入全量 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