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

Question

我想在基于 vite 的 vue 项目中包含 dagre（或 graphlib，遇到同样的问题），但在运行时间或构建时间遇到问题，具体取决于我尝试过的选项。

➜ 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)

我错过了什么？（这可能对其他 commonjs 系统很常见，但其他库已经起作用，所以我觉得 dagre 中使用的习语在这里发挥了一些特定的作用）。

Answer 1

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

Vite 的配置文件应该这样修改：

build: {
    commonjsOptions: {
        ignoreTryCatch: false
    }
}

另外一定要删除 CommonJS Rollup 插件。

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

How can I include dagre/graphlib in a vue.js site built with vite

javascript

vue.js

dagre

vite