bkui-vue babel import plugin

common import plugin for babel, compatible width bkui-vue

Where to add babel-plugin-import-bkui-vue

• babelrc
• babel-loader

module.exports = {
  plugins: [
    [
     'import-bkui-vue',
     {
      style: true
     }
    ]
  ]
}

option list

type StyleFuncType = (componentName: string) => string;
interface IPluginOption {
  // 需按需加载组件库名 默认：bkui-vue
  libraryName: string;
  // 组件文件所在目录名 bkui-vue 默认 lib
  libraryDirectory: string;
  // 组件样式文件所在目录名 默认 与组件同一个目录
  styleLibraryDirectory: string;
  // 自动注入样式后缀 也可以通过方法自定义返回 默认是 false 即 不自动注入样式
  // 例如：在bkui-vue配置为variable.css 即为 引入css varibale为主题配置的样式
  style: 'css' | 'less' | 'variable.css' | boolean | string | StyleFuncType;
  // 组件名配置 与style配置类似 用于配置组件的后缀 也可以通过方法自定义返回 默认是 index.js
  // 例如：你的组件脚本名称是 组件名.cjs 则可以配置为 script: (name) => `${name}.cjs`
  script: string | StyleFuncType;
}

example

{ "libraryName": "bkui-vue" }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/lib/button/index.js'
import 'bkui-vue/lib/button/button.css'

{ "libraryName": "bkui-vue", "style": false }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/lib/button/index.js'

{ "libraryName": "bkui-vue", "style": 'less' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/lib/button/index.js'
import 'bkui-vue/lib/button/button.less'

{ "libraryName": "bkui-vue", "style": 'variable.css' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/lib/button/index.js'
import 'bkui-vue/lib/button/button.variable.css'

{ "libraryName": "bkui-vue", "style": (name) => 'a.scss' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/lib/button/index.js'
import 'bkui-vue/lib/button/a.scss'

{ "libraryName": "bkui-vue", "libraryDirectory": "example", "style": (name) => name + '.TT.scss' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/example/button/index.js'
import 'bkui-vue/example/button/button.TT.scss'

{ "libraryName": "bkui-vue", "libraryDirectory": "example","styleLibraryDirectory": "styles", "style": (name) => name + '.TT.scss' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/example/button/index.js'
import 'bkui-vue/example/styles/button.TT.scss'

{ "libraryName": "bkui-vue", "script": 'ts' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/example/button/index.ts'

{ "libraryName": "bkui-vue", "script": (name) => name + '.js' }

import { Button } from 'bkui-vue';

      ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'bkui-vue/example/button/button.ts'