Node.js环境下如何在Lit项目中正确导入JointJS？

问题本质 #

JointJS v3.x依赖的jQuery、Backbone、Lodash均为传统UMD/CommonJS模块，而你使用的web-dev-server运行在原生ES模块环境中。这些模块未遵循ES模块规范暴露default导出，导致JointJS内部导入时触发语法错误。

方案1：通过web-dev-server配置转换UMD模块 #

该方案通过Rollup插件将UMD模块转换为ES模块兼容格式，无需修改业务代码：

1. 安装必要的开发依赖：

npm install --save-dev @web/dev-server-rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve

2. 在项目根目录创建web-dev-server.config.mjs配置文件：

import { rollupAdapter } from '@web/dev-server-rollup';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  nodeResolve: true,
  plugins: [
    rollupAdapter([
      nodeResolve({ browser: true }),
      commonjs({
        include: ['node_modules/**'],
        // 手动映射UMD模块的导出，适配ES模块环境
        namedExports: {
          'node_modules/jquery/dist/jquery.js': ['default'],
          'node_modules/backbone/backbone.js': ['default'],
          'node_modules/lodash/lodash.js': ['default']
        }
      })
    ])
  ]
};

3. 保持原project-name.js的导入方式不变，重新启动服务：

npm start

此时JointJS应该能正常导入，控制台可打印出joint对象。

方案2：全局引入依赖（快速验证） #

如果不需要严格的ES模块隔离，可以直接在HTML中全局引入依赖，跳过模块导入步骤：

1. 修改index.html，按顺序引入依赖脚本：

<!DOCTYPE html>
<head>
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <script src="./node_modules/backbone/backbone.js"></script>
  <script src="./node_modules/jointjs/dist/joint.js"></script>
  <script type="module" src="project-name.js"></script>
</head>
<body>
<simple-greeting name="World"></simple-greeting>
</body>

2. 修改project-name.js，直接使用全局joint变量：

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
    static styles = css`p { color: blue }`;
    static properties = {
        name: {type: String},
    };
    constructor() {
        super();
        this.name = 'Somebody';
        console.log(joint); // 使用全局变量
    }
    render() {
        return html`<p>Hello, ${this.name}!</p>`;
    }
}
customElements.define('simple-greeting', SimpleGreeting);

重新启动服务即可正常运行。

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