如何在Vite React项目中引入Webpack构建的UMD库？

问题背景 #

用Webpack构建的UMD格式库，通过script标签引入可正常调用全局方法，但在Vite React项目中用import "webpack-numbers";引入时，出现Uncaught TypeError: n is undefined错误。

解决方案 #

1. 正确导入库的导出内容

先确认库源码的导出方式，比如src/index.js如果是这样导出：

export function wordToNum(word) {
  // 业务逻辑
}

在Vite项目中改用命名导入或默认导入：

// 命名导入
import { wordToNum } from 'webpack-numbers';

// 调用示例
console.log(wordToNum('Five'));

// 若库用默认导出，就用默认导入
import webpackNumbers from 'webpack-numbers';
webpackNumbers.wordToNum('Five');

2. 调整Webpack配置，输出ES模块格式

修改库的Webpack配置，新增ES模块构建产物，让Vite能原生解析：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: [
    // 保留原UMD版本供script标签使用
    {
      path: path.resolve(__dirname, 'dist'),
      filename: 'webpack-numbers.js',
      globalObject: 'this',
      library: {
        name: 'webpackNumbers',
        type: 'umd',
      },
    },
    // 新增ES模块版本
    {
      path: path.resolve(__dirname, 'dist'),
      filename: 'webpack-numbers.esm.js',
      library: {
        type: 'module',
      },
    }
  ],
  experiments: {
    outputModule: true,
  },
};

然后在库的package.json中指定module字段：

{
  "module": "dist/webpack-numbers.esm.js",
  "main": "dist/webpack-numbers.js"
}

Vite会优先读取module字段对应的ES模块文件，避免UMD与ES模块的兼容冲突。

3. 直接使用全局变量（不推荐）

如果暂时不想修改库的构建配置，可在导入后直接调用全局变量：

import 'webpack-numbers';

// 访问全局对象上的webpackNumbers
const result = window.webpackNumbers.wordToNum('Five');

这种方式依赖全局变量，不符合ES模块规范，仅作为临时方案。

内容的提问来源于stack exchange，提问作者Bartlomiej Lewandowski