手把手教你vue组件库共享组件不直接打包进代码

头像
heath_learning
     广东
    阅读 8 分钟
    2

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

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

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

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

    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个打包产物：
    image.png
    有没有发现不对，应该打包出4个产物才对，因为YnDialog、YnMessageBox组件根本没有添加css，但打包后却多出了2个css文件，这就是将共享组件打包进代码的问题之一

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

    YnDialog.js

    YnDialog.css
    image.png

    通过查看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个产物了：
    image.png

    再来看下产物代码：
    YnButton.js
    image.png
    YnButton.css
    image.png
    YnButton组件打包产物没有变化，没问题

    YnDialog.js
    image.png
    YnDialog组件打包产物没有再包含YnButton组件代码，而是通过import形式引入，这就是我们想要的结果。
    大功告成！

    vue.jsvue3esbuild打包组件库
    heath_learning
    1.4k 声望31 粉丝
    « 上一篇
    JS检测数字密码强弱
    下一篇 »
    vue3 getCurrentInstance函数为什么可以获取到组件实例？

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    记录一次vue-cli创建vue项目失败，一直卡着不动问题

    heath_learning阅读 282

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    Monorepo：让你的项目脱胎换骨，既能代码复用，又能独立部署！

    OpenTiny社区赞 2阅读 2.1k

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    0 条评论
    得票最新