vite2 做的UI库，打包发布到npmjs.com的方法

官网资料

构建生产版本——库模式
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

然后在入口文件里面引入组件

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: [email protected]",
  "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: [email protected]",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

这样设置后，在发布包。然后在项目里安装的时候，就只会安装我们自己的文件，不会安装第三方插件的代码了。

当然这样设置也有个麻烦，需要项目自己安装第三方插件。

方法就是这样，大家可以自行取舍

使用方式

局部注册

上面的方式只支持局部注册的方式。

这样就可以使用了。

全局注册的方法

如果想要实现全局注册的话，就需要写一个插件来实现，这个，下次再说。

源码

https://gitee.com/naturefw/nf-rollup-ui-element-plus

还在开发中。。。