Vite/Webpack中如何避免主库与插件代码隔离引发的调用错误？

问题背景 #

使用Tempus Dominus日期选择器并引入自定义日期格式插件后，经Vite或Webpack编译出现Uncaught TypeError: this.errorMessages.customDateFormatError is not a function错误。该错误源于编译工具对主库与插件的代码隔离，导致插件无法正确访问主库内部声明的方法。

解决方案 #

Vite配置调整 #

1. 修改vite.config.js，通过optimizeDeps强制将主库与插件打包至同一模块：

export default {
  optimizeDeps: {
    include: [
      '@eonasdan/tempus-dominus/dist/js/tempus-dominus',
      '@eonasdan/tempus-dominus/dist/plugins/customDateFormat'
    ],
    esbuildOptions: {
      resolveExtensions: ['.js']
    }
  }
}

2. 调整app.js中的导入逻辑，直接在主库实例上扩展插件，避免先挂载window导致的隔离：

import tempusDominus from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
import customDateFormat from '@eonasdan/tempus-dominus/dist/plugins/customDateFormat';

tempusDominus.extend(customDateFormat);
window.tempusDominus = tempusDominus;

Webpack配置调整 #

1. 修改webpack.config.js，通过别名与代码分割确保插件使用同一主库实例：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@eonasdan/tempus-dominus': path.resolve(__dirname, 'node_modules/@eonasdan/tempus-dominus/dist/js/tempus-dominus.js')
    }
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        tempusDominus: {
          test: /@eonasdan\/tempus-dominus/,
          name: 'tempus-dominus',
          enforce: true
        }
      }
    }
  }
}

2. 同步调整app.js的导入逻辑，确保先扩展再挂载到window：

import tempusDominus from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
import customDateFormat from '@eonasdan/tempus-dominus/dist/plugins/customDateFormat';

tempusDominus.extend(customDateFormat);
window.tempusDominus = tempusDominus;

核心原理 #

Vite和Webpack的模块隔离机制会将主库与插件视为独立模块处理，导致插件无法访问主库内部的errorMessages对象。通过配置强制两者共享同一主库实例或打包至同一模块，即可消除隔离，让插件正常调用主库方法。

内容的提问来源于stack exchange，提问作者Jeremy Belolo