babel-plugin-import-bk-magic-vue

2.1.11 • Public • Published

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

Package Sidebar

Install

npm i babel-plugin-import-bk-magic-vue

Weekly Downloads

397

Version

2.1.11

License

MIT

Unpacked Size

88.7 kB

Total Files

3

Last publish

Collaborators

  • ielgnaw
  • blueking
  • sundytt