Boost UI

unplugin-boost-ui

这个仓库是用于 Boost UI 相关的 unplugin 插件工具。

功能

💚 为 Boost UI 按需引入样式。
🌎 替换默认语言。
⚡️ 使用 unplugin 以支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等。

安装

npm i unplugin-boost-ui -D

Vite

// vite.config.ts
import BoostUI from 'unplugin-boost-ui/vite'

export default {
  plugins: [
    BoostUI({
      // options
    }),
  ],
}

Rollup

// rollup.config.js
import BoostUI from 'unplugin-boost-ui/rollup'

export default {
  plugins: [
    BoostUI({
      // options
    }),
  ],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-boost-ui/esbuild')({
      // options
    }),
  ],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-boost-ui/webpack')({
      // options
    }),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-boost-ui/webpack')({
        // options
      }),
    ],
  },
}

使用

插件会自动转换：

import { AgileButton } from 'boost-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { AgileButton } from 'boost-ui'
import 'boost-ui/es/components/button/style/css'

选项

`useSource`

type UseSource = boolean

// useSource: false
import { AgileButton } from 'boost-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { AgileButton } from 'boost-ui'
import 'boost-ui/es/components/button/style/css'

// useSource: true
import { AgileButton } from 'boost-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { AgileButton } from 'boost-ui'
import 'boost-ui/es/components/button/style/index'

`lib`

一般这个是用不到的，不过作为一个通用选项，还是暴露了出来，如果有用到这个的结构一定要和 BoostUI 的输出包结构一致，详见 unpkg.com

type Lib = string

default: 'boost-ui'

// lib: 'other-lib'
import { AgileButton } from 'other-lib'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { AgileButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'

format

type Format = 'esm' | 'cjs'

default: 'esm'

esm 对应 [lib]/es/components/*

cjs 对应 [lib]/lib/components/*

/es 对应 ES Module 输出
/lib 对应 CommonJS 的输出

使用该选项来选择使用哪一个包。

// format: 'cjs'
import { AgileButton } from 'boost-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { AgileButton } from 'boost-ui'
import 'boost-ui/lib/components/button/style/css'

prefix

type Prefix = string

// prefix = Al
import { AlButton } from 'xx-lib'

`defaultLocale`

替换默认语言，你可以在这查看所有语言列表。

其他插件

unplugin-vue-components