Vite配置Library模式打包后导出的文件无法被其他项目引入怎么办？

Air-卫红提问于 2026-02-15 10:24:34 阅读 22

前端

我在用Vite的Library模式打包一个工具库时遇到问题，按照文档配置了library选项，但打包生成的umd文件在另一个项目里引入时一直报错：Uncaught TypeError: Cannot read properties of undefined (reading 'myFunction')。

具体操作是这样的：
修改了vite.config.js配置：


export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'MyLib',
      formats: ['umd']
    },
    rollupOptions: {
      external: ['lodash']
    }
  }
})

然后用vite build生成了dist/mylib.umd.js，但在测试项目里这样引入：


import { myFunction } from '../dist/mylib.umd.js'

控制台提示找不到模块，换成script标签引入时又出现全局变量找不到方法的问题。尝试过在rollupOptions里添加输出dir配置，但好像没解决核心问题…

构建工具

我来解答赞 5 收藏

反馈

1 条解答

W″慧娟 Lv1

你遇到的问题主要是因为UMD格式的打包配置和使用方式不匹配导致的。UMD格式的库可以通过script标签直接引入，也可以通过模块系统引入，但需要正确配置导出的内容和命名。

代码给你：

// vite.config.js

import { defineConfig } from 'vite';



export default defineConfig({

  build: {

    lib: {

      entry: './src/index.js', // 相对路径也可以，不用path.resolve

      name: 'MyLib', // 全局变量名

      fileName: 'mylib', // 输出文件名

      formats: ['umd'] // 确保只输出UMD格式

    },

    rollupOptions: {

      external: [], // 如果依赖需要被打包进去，这里不要写external

      output: {

        globals: {

          lodash: '_' // 如果有外部依赖，需要定义全局变量映射

        }

      }

    }

  }

});

然后在你的入口文件 src/index.js 中，确保你正确导出了方法：

// src/index.js

export function myFunction() {

  console.log('This is myFunction');

}



// 添加一个默认导出

export default {

  myFunction

};

接下来重新打包，生成的UMD文件就可以这样使用了：

1. 如果用script标签引入：

<script src="./dist/mylib.umd.js"></script>

<script>

  MyLib.myFunction(); // 使用全局变量名调用

</script>

2. 如果用ESM模块引入：

import { myFunction } from '../dist/mylib.umd.js';

myFunction();

关键点在于：
- UMD格式需要定义全局变量名，也就是 name 配置项。
- 不要随便把依赖标记为 external，除非你确定测试项目里已经安装了这些依赖。
- 导出的方式要统一，推荐既有命名导出又有默认导出。

希望这段代码能解决你的问题。如果还有报错，检查一下控制台具体提示，可能是其他配置冲突了。

2026-02-15 10:43