官網(wǎng)資料

構(gòu)建生產(chǎn)版本——庫模式
https://cn.vitejs.dev/guide/build.html#library-mode

詳細(xì)設(shè)置
https://cn.vitejs.dev/config/#build-lib

發(fā)布一個(gè)組件

上次（http://www.reibang.com/p/1bf2915aa970）說的是如何發(fā)布一個(gè)純 JavaScript 的函數(shù)庫咙边，那么組件怎么發(fā)布呢审编？
雖然帶了HTML撼班，但是原理是一樣的。做一個(gè)入口文件垒酬，import 組件即可砰嘁。
vite會(huì)自動(dòng)把模板變成 jsx 的形式件炉。

寫代碼

我們基于 element-plus 做一個(gè)二次封裝，先做個(gè)最簡(jiǎn)單的文本框矮湘。

// ./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 // 基礎(chǔ)屬性
    },
    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
}

然后按照上一次介紹的方法打包發(fā)布即可斟冕。

打包后的代碼：

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

還是比較清爽的。

依賴庫的處理方式

這個(gè)實(shí)例里依賴的第三方庫有三個(gè)：vue缅阳、element-plus磕蛇，以及自己封裝的nf-ui-controller。
打包的時(shí)候十办，可以通過vite.config.js來設(shè)置秀撇。

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: {
      // 確保外部化處理那些你不想打包進(jìn)庫的依賴
      external: ['vue','nf-ui-controller','element-plus'],
      output: {
        // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
        globals: {
          vue: 'Vue',
          'nf-ui-controller': 'nfUIController',
          'element-plus': 'elementPlus'
        }
      }
    }
  }
})

注意看 external 的部分，這樣打包后向族，依賴的第三方庫會(huì)以 import 的方式（詳見上面的代碼）出現(xiàn)呵燕，否則會(huì)把源碼打到包里面，這樣文件就變大了件相。

安裝的時(shí)候會(huì)安裝哪些內(nèi)容再扭？

這個(gè)就要看 package.json 的設(shè)置情況了。

{
  "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"
  }
}

如果這樣寫的話泛范，安裝后，就會(huì)把依賴庫也給安裝上去紊撕，這樣項(xiàng)目文件就比較大了敦跌。

那么能不能清爽一點(diǎn)呢？當(dāng)然可以逛揩，我們只需要在發(fā)布的時(shí)候去掉 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"
  }
}

這樣設(shè)置后惧笛，在發(fā)布包。然后在項(xiàng)目里安裝的時(shí)候逞泄，就只會(huì)安裝我們自己的文件患整，不會(huì)安裝第三方插件的代碼了。

當(dāng)然這樣設(shè)置也有個(gè)麻煩喷众，需要項(xiàng)目自己安裝第三方插件各谚。

方法就是這樣，大家可以自行取舍

使用方式

局部注冊(cè)

上面的方式只支持局部注冊(cè)的方式到千。

<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>

這樣就可以使用了昌渤。

全局注冊(cè)的方法

如果想要實(shí)現(xiàn)全局注冊(cè)的話，就需要寫一個(gè)插件來實(shí)現(xiàn)憔四，這個(gè)膀息，下次再說般眉。

源碼

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

還在開發(fā)中。潜支。甸赃。