Registry / devops / babel-plugin-import-bk-magic-vue

babel-plugin-import-bk-magic-vue

library2.1.11jsnpmunverified

A Babel plugin that provides auto-import of component styles for the bk-magic-vue component library. Currently at version 2.1.11, this plugin allows developers to use shorthand imports (both named and default) that automatically include the component's CSS and the common stylesheet (common.min.css). It simplifies the development workflow by eliminating the need for manual style imports. The plugin supports importSpecifier syntax (e.g., import { bkDropdownMenu } from 'bk-magic-vue') and importDefaultSpecifier syntax (e.g., import bkRadio from 'bk-magic-vue/lib/radio'), and also handles full library import. It is configurable via .babelrc with a baseLibName option, defaulting to 'bk-magic-vue'.

devops

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

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-IMPOR

babel-plugin-import-bk-magic-vue

devopsjavascriptv2.1.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

import { bkDropdownMenu } from 'bk-magic-vue'

✓ import { bkDropdownMenu } from 'bk-magic-vue'

✗ const bkDropdownMenu = require('bk-magic-vue').bkDropdownMenu

Named imports automatically include component styles. Avoid CommonJS require as it may not trigger the plugin.

import bkRadio from 'bk-magic-vue/lib/radio'

✓ import bkRadio from 'bk-magic-vue/lib/radio'

✗ import { bkRadio } from 'bk-magic-vue'

Default import from the subpath 'lib/radio' is the correct way to import a single component when using default specifier.

import { locale, lang, localeMixin } from 'bk-magic-vue'

✓ import { locale, lang, localeMixin } from 'bk-magic-vue'

These i18n helpers are imported without their associated styles automatically (no style injection).

import bkMagicVue from 'bk-magic-vue'

✓ import bkMagicVue from 'bk-magic-vue'

Full library import will automatically include the entire CSS bundle.

Install the plugin, configure .babelrc with baseLibName, then use shorthand imports that automatically include component styles.

// Install plugin npm install babel-plugin-import-bk-magic-vue --save-dev // .babelrc configuration { "presets": ["@babel/preset-env"], "plugins": [ ["import-bk-magic-vue", { "baseLibName": "bk-magic-vue" }] ] } // Usage in Vue component import { bkButton, bkDialog } from 'bk-magic-vue' import bkRadio from 'bk-magic-vue/lib/radio' export default { components: { bkButton, bkDialog, bkRadio } } // Styles for bkButton, bkDialog, and bkRadio are automatically imported.

Debug

Known issues

breakingPlugin only works with babel-plugin-import-bk-magic-vue >= 2.0.0; earlier versions may have different behavior.

fix

Upgrade to version 2.x or later.

affects: <2.0.0

gotchaThe plugin is designed specifically for bk-magic-vue; using it with other libraries will have no effect.

fix

Only use this plugin in projects that consume bk-magic-vue.

affects: *

gotchaNamed imports of i18n helpers (locale, lang, localeMixin) do not automatically include styles; users may incorrectly expect style injection.

fix

Manually import any needed styles for those helpers, if any.

affects: *

deprecatedDefault import from 'bk-magic-vue' (full library) imports all components and styles; may cause larger bundle sizes.

fix

Use named or per-component imports to reduce bundle size.

affects: *

Errors

Common errors & fixes

Plugin 'import-bk-magic-vue' not found

The plugin is not installed or is misspelled in babel configuration.

fix

Run: npm install babel-plugin-import-bk-magic-vue --save-dev and ensure the plugin name matches exactly.

TypeError: Cannot read property 'baseLibName' of undefined

The plugin is configured without an object or the options shape is incorrect.

fix

Ensure your .babelrc contains ["import-bk-magic-vue", { "baseLibName": "bk-magic-vue" }].

Module not found: Error: Can't resolve 'bk-magic-vue/lib/radio'

The bk-magic-vue package itself is not installed or the component path is invalid.

fix

Install bk-magic-vue: npm install bk-magic-vue and verify the component exists under lib/.

Upgrade

Version history

2.1.11latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

packagebabel-plugin-import-bk-magic-vue ↗