UI 框架-打包发布

发表于 | 分类于

组件库基本制作完成了，现在让我们发布它吧

整理组件库

公用样式表

细心的朋友应该已经注意到了，前面我们在写组件的时候，css 类名都是 laby-xxx 这样的

所以我们可以用选择器来做到公用配置

在 src/lib 文件夹下，新建一个 scss 文件，或者 css 也行，2333

1
2
3
4
5
6
7
8
9
10
11
[class^="laby-"],[class*=" laby-"]* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
        "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
        "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
        "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
        SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

前缀改成你的项目标识就可以了

统一入口

我们还要告诉打包器，要暴露哪些内容

比如说创建一个 index.ts，然后汇总一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import LabyButton from './Button.vue'
import LabyCard from './Card.vue'
import LabyDialog from './Dialog.vue'
import LabySwitch from './Switch.vue'
import LabyTable from './Table.vue'
import LabyTab from './Tab.vue'
import LabyTabs from './Tabs.vue'

export { LabyButton, LabyCard, LabyDialog, LabySwitch, LabyTable, LabyTab, LabyTabs, }

export default {
    install: Vue => {
        const components = [LabyButton, LabyCard, LabyDialog, LabySwitch, LabyTable, LabyTab, LabyTabs]
        components.forEach(item => {
            Vue.component(item.name, item)
        })
    }
}

注意，此处有一个 install 方法，因为用户有可能使用完整引入，此时必须提供一个 install 方法才可以完整引入

现在就可以使用下述方式完整引入

1
2
3
4
5
6
7
8
9
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import LabyUI from 'laby-ui-vue';
import 'laby-ui-vue/lib/laby.css';

const app = createApp(App);
app.use(LabyUI);
app.mount('#app');

然后上面另一句 export 是用于部分引入组件的，要想部分引入组件，必须在每个子组件中都定义 install 方法。一个示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<div class="laby-card" :style="{ '--color': color }">
    <slot></slot>
    </div>
</template>
<script lang="ts">
    declare const props: {
        color: string;
    };

    export default {
        install: function (Vue) {
            Vue.component(this.name, this);
        },
        name: "LabyCard",
        props: {
            color: {
                type: String,
                default: "#fe9acf",
            },
        },
    };
</script>
<style lang="scss">
    .laby-card {
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px var(--color);
        padding: 12px;
        background: white;
    }
</style>

现在就可以使用下述方式部分引入

1
2
3
4
5
6
7
8
9
10
11
12
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { LabyButton, LabyCard } from 'laby-ui-vue';
import 'laby-ui-vue/lib/laby.css';

const app = createApp(App);

app.use(LabyButton);
app.use(LabyCard);

app.mount('#app');

注册 npm 账号

显然是要发布到 npm

打开 npm 官网 注册一个账号先

配置 rollup 打包

vite 本身不能提供打包功能，需要我们手动配置

此处选用 rollup 进行打包

首先在项目根目录下新建文件 rollup.config.js

各配置含义请参看注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// rollup.config.js
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
    input: 'src/lib/index.ts', // 主入口配置
    output: [{
        globals: {
            vue: 'Vue'  // 全局依赖
        },
        name: 'Laby',  // 项目名称
        file: 'lib/laby.js',  // 输出文件名
        format: 'es',  // 输出文件格式，使用 es module
        plugins: [terser()]  // 压缩文件大小
    }, {
        globals: {
            vue: 'Vue'  // 全局依赖
        },
        name: 'Laby',  // 项目名称
        file: 'lib/laby.umd.js',  // 输出文件名
        format: 'umd',  // 输出文件格式，使用 umd
        plugins: [terser()]  // 压缩文件大小
    },],
    plugins: [
        vue({
            include: /\.vue$/,
        }),
        scss({ include: /\.scss$/, sass: dartSass }),
        esbuild({
            include: /\.[jt]s$/,
            minify: process.env.NODE_ENV === 'production',
            target: 'es2015'  // 降格为 es6 语法
        }),
    ],
}

可见，rollup 依赖至少 5 个包

  1. sass
  2. rollup-plugin-esbuild
  3. rollup-plugin-vue
  4. rollup-plugin-scss
  5. rollup-plugin-terser

我们需要先下载它们

1
2
3
4
5
npm install sass -D
npm install rollup-plugin-esbuild -D
npm install rollup-plugin-vue -D
npm install rollup-plugin-scss -D
npm install rollup-plugin-terser -D

下载完后，请注意检查一下 package.json，看看上述依赖是不是都在 devDependencies 下，若不是，请移动到该字段下

进行打包

现在可以进行打包了

在项目根目录运行

1
rollup -c

运行完毕后，会在项目根目录下看到一个新文件夹 lib

里面应该有三个文件

  • laby.css
  • laby.js
  • laby.umd.js

发布到 npm

先回到项目根目录，然后打开 package.json

向该文件中添加 files 和 main 字段，用于配置组件库的所在地和默认文件

1
2
3
4
5
6
7
8
{
  "name": "laby-ui",
  "version": "0.0.0",
  "files": [
    "lib/*"
  ],
  "main": "lib/laby.js",
}

发布到 npm 时，发布的项目名取决于该配置中的 name 字段，发布的版本号取决于该配置中的 version 字段

注意，每次发布时，发布的新版本号不得低于该项目以前发布过的任意版本号

然后在项目根目录下运行命令

1
npm login

登录上你刚才在 npm 注册的账号

注意，此处必须使用 npm 源，taobao 源是不能登上 npm 账号的

然后运行命令

1
npm publish

就可以发布包到 npm 了

如果你的包名已经被别人发布过，那么这一步会失败，回头修改你的包名吧

如果发布错了，可以删除这个包，但是要求是 72 小时内，这里不教了，反正是 unpublish

发布后可能会有延迟，等待 10 分钟左右应该就可以了

此时通过

1
npm install laby-ui

就可以下载到你新发布的包了

感谢阅读

--It's the end.Thanks for your read.--