官网资料
构建生产版本——库模式
https://cn.vitejs.dev/guide/build.html#library-mode
详细设置
https://cn.vitejs.dev/config/#build-lib
发布一个组件
上次（https://www.jianshu.com/p/1bf2915aa970）说的是如何发布一个纯 JavaScript 的函数库，那么组件怎么发布呢？
虽然带了HTML，但是原理是一样的。做一个入口文件，import 组件即可。
vite会自动把模板变成 jsx 的形式。
写代码
我们基于 element-plus 做一个二次封装，先做个最简单的文本框。
// ./form/item/t-text.vue
<!--单行文本-->
<template>
<el-input
v-model="value"
:id="'c' + columnId"
:name="'c' + columnId"
:size="size"
:clearable="clearable"
:validate-event="validate_event"
:show-word-limit="show_word_limit"
@blur="run"
@change="run"
@clear="run"
@input="myinput"
@keydown="clear"
>
</el-input>
</template>
<script >
import { defineComponent } from 'vue'
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController } from 'nf-ui-controller'
export default defineComponent({
name: 'el-form-item-text',
props: {
modelValue: [String, Number],
...itemProps // 基础属性
},
emits: ['update:modelValue'],
setup (props, context) {
const {
value,
run,
clear,
myinput
} = itemController(props, context.emit)
return {
value,
run,
clear,
myinput
}
}
})
</script>
然后在入口文件里面引入组件
import nfText from './form/item/t-text.vue'
export {
nfText
}
然后按照上一次介绍的方法打包发布即可。
打包后的代码：
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
import { defineComponent, resolveComponent, openBlock, createBlock } from "vue";
import { itemProps, itemController } from "nf-ui-controller";
var _export_sfc = (sfc, props) => {
for (const [key, val] of props) {
sfc[key] = val;
}
return sfc;
};
const _sfc_main = defineComponent({
name: "el-form-item-text",
props: __spreadValues({
modelValue: [String, Number]
}, itemProps),
emits: ["update:modelValue"],
setup(props, context) {
const {
value,
run,
clear,
myinput
} = itemController(props, context.emit);
return {
value,
run,
clear,
myinput
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = resolveComponent("el-input");
return openBlock(), createBlock(_component_el_input, {
modelValue: _ctx.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event),
id: "c" + _ctx.columnId,
name: "c" + _ctx.columnId,
size: _ctx.size,
clearable: _ctx.clearable,
"validate-event": _ctx.validate_event,
"show-word-limit": _ctx.show_word_limit,
onBlur: _ctx.run,
onChange: _ctx.run,
onClear: _ctx.run,
onInput: _ctx.myinput,
onKeydown: _ctx.clear
}, null, 8, ["modelValue", "id", "name", "size", "clearable", "validate-event", "show-word-limit", "onBlur", "onChange", "onClear", "onInput", "onKeydown"]);
}
var tText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { tText as nfText };
//# sourceMappingURL=nf-ui-element-plus.es.js.map
还是比较清爽的。
依赖库的处理方式
这个实例里依赖的第三方库有三个：vue、element-plus，以及自己封装的nf-ui-controller。
打包的时候，可以通过vite.config.js来设置。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 主要用于alias文件路径别名
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 打包配置
build: {
lib: {
entry: resolve(__dirname, 'lib/main.js'),
name: 'nf-ui-element-plus',
fileName: (format) => `nf-ui-element-plus.${format}.js`
},
sourcemap: true,
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue','nf-ui-controller','element-plus'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
'nf-ui-controller': 'nfUIController',
'element-plus': 'elementPlus'
}
}
}
}
})
注意看 external 的部分，这样打包后，依赖的第三方库会以 import 的方式（详见上面的代码）出现，否则会把源码打到包里面，这样文件就变大了。
安装的时候会安装哪些内容？
这个就要看 package.json 的设置情况了。
{
"name": "nf-ui-element-plus",
"version": "0.0.2",
"description": "基于 element-plus 的二次封装。",
"keyword": "vue3 element-plus",
"files": [
"dist"
],
"main": "./dist/nf-ui-element-plus.umd.js",
"module": "./dist/nf-ui-element-plus.es.js",
"exports": {
".": {
"import": "./dist/nf-ui-element-plus.es.js",
"require": "./dist/nf-ui-element-plus.umd.js"
}
},
"private": false,
"license": "MIT",
"auther": "jin yang (jyk). Email: jyk0013@163.com",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"element-plus": "^1.2.0-beta.3",
"nf-ui-controller": "^0.0.1",
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}
如果这样写的话，安装后，就会把依赖库也给安装上去，这样项目文件就比较大了。
那么能不能清爽一点呢？当然可以，我们只需要在发布的时候去掉 dependencies、devDependencies 即可。
{
"name": "nf-ui-element-plus",
"version": "0.0.2",
"description": "基于 element-plus 的二次封装。",
"keyword": "vue3 element-plus",
"files": [
"dist"
],
"main": "./dist/nf-ui-element-plus.umd.js",
"module": "./dist/nf-ui-element-plus.es.js",
"exports": {
".": {
"import": "./dist/nf-ui-element-plus.es.js",
"require": "./dist/nf-ui-element-plus.umd.js"
}
},
"private": false,
"license": "MIT",
"auther": "jin yang (jyk). Email: jyk0013@163.com",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}
这样设置后，在发布包。然后在项目里安装的时候，就只会安装我们自己的文件，不会安装第三方插件的代码了。
当然这样设置也有个麻烦，需要项目自己安装第三方插件。
方法就是这样，大家可以自行取舍
使用方式
局部注册
上面的方式只支持局部注册的方式。
<template>
<div class="" style="text-align: left;">
<nf-text></nf-text>
</div>
</template>
<script>
// @ is an alias to /src
import { reactive } from 'vue'
import { nfText } from 'nf-ui-element-plus'
export default {
name: 'Home',
components: {
nfText
},
setup () {
return {
}
}
}
</script>
这样就可以使用了。
全局注册的方法
如果想要实现全局注册的话，就需要写一个插件来实现，这个，下次再说。
源码
https://gitee.com/naturefw/nf-rollup-ui-element-plus
还在开发中。。。
