如何在用vite构建的vue.js站点中包含dagre/graphlib

Question

我希望在基于vite的vue项目中包含dagre (或graphlib，get相同的问题)，但根据我尝试过的选项，在运行时或构建时遇到问题。

➜ npm create vite@latest
✔ Project name: … demo
✔ Select a framework: › vue
✔ Select a variant: › vue

我添加了库npm install dagre并将其导入到创建的hello-world模板中，结果是

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import dagre from 'dagre'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果我运行npm run dev，站点将愉快地加载到浏览器中。如果运行npm run build && npm run preview，将得到以下错误：

TypeError: Cannot read properties of undefined (reading 'Graph')

这似乎与commonjs库的导入机制有关。

我安装了npm install @rollup/plugin-commonjs --save-dev并转移到以下配置(vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            plugins: [commonjs()]
        }
    }
})

但是现在在构建时遇到了一个错误：

> demo@0.0.0 build
> vite build

vite v2.9.8 building for production...
transforming (31) node_modules/dagre/lib/greedy-fas.jsUnexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000./lib/graphlib?commonjs-proxy"
(commonjs) load "\u0000./lib/layout?commonjs-proxy"
(commonjs) load "\u0000./lib/debug?commonjs-proxy"
(commonjs) load "\u0000./lib/util?commonjs-proxy"
(commonjs) load "\u0000./lib/version?commonjs-proxy"
(commonjs) load "\u0000./lodash?commonjs-proxy"
(commonjs) load "\u0000./acyclic?commonjs-proxy"
(commonjs) load "\u0000./normalize?commonjs-proxy"
(commonjs) load "\u0000./rank?commonjs-proxy"
(commonjs) load "\u0000./util?commonjs-proxy"
(commonjs) load "\u0000./parent-dummy-chains?commonjs-proxy"
(commonjs) load "\u0000./nesting-graph?commonjs-proxy"
(commonjs) load "\u0000./add-border-segments?commonjs-proxy"
(commonjs) load "\u0000./coordinate-system?commonjs-proxy"
(commonjs) load "\u0000./order?commonjs-proxy"
(commonjs) load "\u0000./position?commonjs-proxy"
(commonjs) load "\u0000./graphlib?commonjs-proxy"
(commonjs) load "\u0000./greedy-fas?commonjs-proxy"
(commonjs) load "\u0000./feasible-tree?commonjs-proxy"
(commonjs) load "\u0000./network-simplex?commonjs-proxy"
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000./lib/graphlib?commonjs-proxy"
(commonjs) load "\u0000./lib/layout?commonjs-proxy"
(commonjs) load "\u0000./lib/debug?commonjs-proxy"
(commonjs) load "\u0000./lib/util?commonjs-proxy"
(commonjs) load "\u0000./lib/version?commonjs-proxy"
(commonjs) load "\u0000./lodash?commonjs-proxy"
(commonjs) load "\u0000./acyclic?commonjs-proxy"
(commonjs) load "\u0000./normalize?commonjs-proxy"
(commonjs) load "\u0000./rank?commonjs-proxy"
(commonjs) load "\u0000./util?commonjs-proxy"
(commonjs) load "\u0000./parent-dummy-chains?commonjs-proxy"
(commonjs) load "\u0000./nesting-graph?commonjs-proxy"
(commonjs) load "\u0000./add-border-segments?commonjs-proxy"
(commonjs) load "\u0000./coordinate-system?commonjs-proxy"
(commonjs) load "\u0000./order?commonjs-proxy"
(commonjs) load "\u0000./position?commonjs-proxy"
(commonjs) load "\u0000./graphlib?commonjs-proxy"
(commonjs) load "\u0000./greedy-fas?commonjs-proxy"
(commonjs) load "\u0000./feasible-tree?commonjs-proxy"
(commonjs) load "\u0000./network-simplex?commonjs-proxy"
    at process.handleEmptyEventLoop (/Users/wob/src/tmp/vuevitetest/demo/node_modules/rollup/dist/shared/rollup.js:23127:20)
    at Object.onceWrapper (node:events:642:26)
    at process.emit (node:events:527:28)

我遗漏了什么？(这在其他常用的系统中是很常见的，但是其他的lib已经起作用了，所以我觉得在dagre中使用的习语中有一些特殊的东西。)

Answer 1

解决方法是向CommonJS编译模块添加一个选项，它将在GitHub：https://github.com/vitejs/vite/issues/5759#issuecomment-1034461225上讨论

Vite的配置文件应该更改如下：

build: {
    commonjsOptions: {
        ignoreTryCatch: false
    }
}

另外，一定要删除CommonJS的汇总插件。