乐趣区

关于vue.js:手把手教你vue组件库共享组件不直接打包进代码

jiezi

1、“共享组件不间接打包进代码”什么意思？

比方你写了一个组件库，外面有 Button、Dialog、MessageBox 3 个组件，其中Dialog、MessageBox 组件都援用了 Button 组件，那么 Button 组件就是共享组件。当对这 3 个组件挨个打包实现后去查看 Dialog、MessageBox 组件打包实现后的产物代码，会发现 Dialog、MessageBox 组件外面都蕴含了 Button 组件产物代码，这样一来产物体积就变大了。

那有没有什么方法使得打包实现后的 Dialog、MessageBox 组件产物里不蕴含 Button 组件产物代码呢？
答案必定是有的，比方 ant-design-vue、element-ui 它们打包后的产物代码中就不蕴含共享组件代码，它们是通过 import 或require去加载共享组件。

如 ant-design-vue 打包产物代码：

2、怎么实现呢？

这个问题也困扰了我很久，直到我用 esbuild 去打包我的【vue3 bootstrap 图标组件库】时我才解决这个问题。
原理很简略：把共享组件当成内部扩大(Externals)

在打包时通常会把 vue 设置为内部扩大，那共享组件为甚么不能设置为内部扩大呢？将共享组件设置为内部扩大后 webpack 或其余打包工具就不会将其打包进产物中，而是以 import 或require的模式去加载。

看到这里你应该恍然大悟了吧！接下来的代码你就会写了。

3、代码实现(vue3)

我这里以 esbuild 打包为例，webpack 或 vite 代码差不多。

首先须要装置 2 个要害依赖：npm i esbuild esbuild-plugin-vue -D
接下来装置 esbuild 打包进去依赖：npm i esbuild-plugin-progress -D
装置 css 解决依赖：npm i postcss esbuild-sass-plugin autoprefixer postcss-preset-env postcss-import -D

目录构造：

-my-project
  +node_modules
  -src
    -components
       yn-button.scss
       YnButton.vue
       YnDialog.vue
       YnMessageBox.vue
    App.vue
    main.js
  build-lib.js
  package.json

yn-button.scss

.yn-button{transition: all .3s;}

YnButton.vue

<template>
<button
  class="yn-button"
  :type="nativeType"
  :disabled="disabled">
  <slot></slot>
</button>
</template>

<script>
export default {
  name: 'YnButton',
  props: {
    nativeType: {
      type: String,
      default: 'button'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss">
@import "yn-button";
</style>

YnDialog.vue

<template>
<dialog
  v-show="visible"
  class="yn-dialog"
  :class="{'dialog-opened': visible}":data-opened-count="openCount">
  <h1>
    <slot name="title">{{title}}</slot>
  </h1>
  <div class="dialog-content">
    <slot></slot>
  </div>
  <div class="dialog-footer">
    <yn-button class="dialog-cancel-btn" @click="close"> 勾销 </yn-button>
    <yn-button class="dialog-ok-btn" @click="close"> 确定 </yn-button>
  </div>
</dialog>
</template>

<script>
import {
  ref,
  watch
} from 'vue';
// 因为 esbuild 打包时是以脚本执行目录为根目录，因而这里不以我的项目门路去引入 button 组件
import YnButton from 'src/components/YnButton.vue';
let count = 0;
export default {
  name: 'YnDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  components: {YnButton},
  emits: ['update:visible', 'close'],
  setup (props, ctx) {let openCount = ref(count);
    watch(() => props.visible, function (isVisible) {
      count++;
      openCount.value = count;
    });
    return {
      openCount,

      close () {ctx.emit('update:visible', false);
        ctx.emit('close');
      }
    };
  }
};
</script>

YnMessageBox.vue

<template>
<div class="yn-message-box">
  <slot></slot>
  <div class="yn-message-box-operate">
    <yn-button> 确定 </yn-button>
  </div>
</div>
</template>

<script>
import YnButton from 'src/components/YnButton.vue';
export default {
  name: 'YnMessageBox',
  components: {YnButton}
};
</script>

3.1、惯例打包（共享组件打包进产物）

build-lib.js

const path = require('path');

const vue = require('esbuild-plugin-vue').default; // 解决 vue 组件
const esBuild = require('esbuild');
const progress = require('esbuild-plugin-progress'); // esbuild 打包进度条

// scss、css 解决
const {sassPlugin} = require('esbuild-sass-plugin');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');

function build (entryPoint) {
  esBuild.build({
    bundle: true,
    entryPoints: [entryPoint],
    outdir: 'libs',
    external: ['vue'],
    loader: {'.ts': 'ts'},
    format: 'esm',
    drop: ["console", "debugger"], // 移除 console、debugger 信息
    treeShaking: true,
    plugins: [
      sassPlugin({async transform (source) {const { css} = await postcss([
            autoprefixer,
            postcssPresetEnv(),
            postcssImport()]).process(source, { from: undefined});
          return css;
        }
      }),
      vue(),
      progress()]
  });
}

build(path.resolve(__dirname, './src/components/YnButton.vue'));
build(path.resolve(__dirname, './src/components/YnDialog.vue'));
build(path.resolve(__dirname, './src/components/YnMessageBox.vue'));

在控制台执行node ./build-lib.js，在 libs 目录将会有 6 个打包产物：

有没有发现不对，应该打包出 4 个产物才对，因为 YnDialog、YnMessageBox 组件基本没有增加 css，但打包后却多出了 2 个 css 文件，这就是将共享组件打包进代码的问题之一

再来看下打包后的产物：
YnButton.js

YnButton.css

YnDialog.js

YnDialog.css

通过查看 YnDialog.js 产物的内容，发现外面蕴含了 YnButton 组件的代码，显然这不是咱们想要的

3.2、拆散共享组件代码打包

esbuild有一个 external 参数能够配置指定的依赖为内部扩大，但它是动态的，只实用于配置一些全局的内部扩大，对于动静的、须要依据条件去判断的内部扩大它是做不到的。
那有什么方法能够做到呢？答案就是：plugin（插件）
咱们能够写一个插件来实现

const path = require('path');

const vue = require('esbuild-plugin-vue').default; // 解决 vue 组件
const esBuild = require('esbuild');
const progress = require('esbuild-plugin-progress'); // esbuild 打包进度条

// scss、css 解决
const {sassPlugin} = require('esbuild-sass-plugin');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');

function build (entryPoint) {
  esBuild.build({
    bundle: true,
    entryPoints: [entryPoint],
    outdir: 'libs',
    external: ['vue'],
    loader: {'.ts': 'ts'},
    format: 'esm',
    drop: ["console", "debugger"], // 移除 console、debugger 信息
    treeShaking: true,
    plugins: [
      sassPlugin({async transform (source) {const { css} = await postcss([
            autoprefixer,
            postcssPresetEnv(),
            postcssImport()]).process(source, { from: undefined});
          return css;
        }
      }),
      { // 自定义设置内部扩大 esbuild 插件
        name: 'my-esbuild-plugin',
        setup (build) {
          let filter = /./;
          /*
           onResolve 钩子是一个门路解析的钩子，是 esbuild 去解析门路的时候触发的，也就是你执行 import ... from ... 的时候会调用 onResolve 钩子
           */
          build.onResolve({filter: filter}, function (args) {// console.log('args', args);
            let modulePath = args.importer;
            let kind = args.kind;
            let path = args.path;
            let fileInComponents = modulePath.includes('/components/');
            // 只有通过导入的，并且在 components 目录下的、以.vue 结尾的文件能力视为内部扩大
            let external = fileInComponents && kind === 'import-statement' && path.endsWith('.vue');

            // 不须要指定为内部扩大的依赖间接 return null
            if (!external) {return null;}
            /*
             将 import 门路中的 'src/components/' 局部替换成 './'，因为打包后它们都是在同一个文件夹。打包后都产物中共享组件将以 import XX from './YY.vue' 模式引入
             */
            // tip: 这部分逻辑须要依据本人我的项目目录构造来判断是否须要这样做
            if (path.startsWith('src/components/')) {path = path.replace('src/components/', './');
              path = path.replace('.vue', '.js');
            }
            return {
              path,
              // 是否须要 external (如果该模块为 external，则 esbuild 构建时不会去加载该模块，而是保留原有的 import xxx from 'yyy' 代码)
              external
            };
          });
        }
      },
      vue(),
      progress()]
  });
}

build(path.resolve(__dirname, './src/components/YnButton.vue'));
build(path.resolve(__dirname, './src/components/YnDialog.vue'));
build(path.resolve(__dirname, './src/components/YnMessageBox.vue'));

再到控制台运行 node ./build-lib.js 命令，此时在 libs 目录下只有 4 个产物了：

再来看下产物代码：
YnButton.js

YnButton.css

YnButton组件打包产物没有变动，没问题

YnDialog.js

YnDialog组件打包产物没有再蕴含 YnButton 组件代码，而是通过 import 模式引入，这就是咱们想要的后果。
功败垂成！

退出移动版