通过CDN导入cytoscape-sbgn-stylesheet时如何解决ES6函数缺失问题？

问题说明 #

习惯用单HTML文件配合CDN测试JS库，尝试实现cytoscape-sbgn-stylesheet的自定义Demo时遇到两个问题：

• demo.js会自动渲染到#cy容器，无法自定义容器，且无法获取核心的sbgnStylesheet函数
• bundle.js导入时报TypeError: memoize is not a function，即使已导入lodash

解决步骤与代码实现 #

1. 调整依赖引入方式 #

bundle.js基于CommonJS打包，依赖全局的lodash对象，因此必须引入标准lodash（而非lodash-es），让它挂载到window._供bundle.js调用。

2. 正确导入核心函数 #

bundle.js的核心函数是默认导出的sbgnStylesheet，直接用ES模块默认导入即可。

3. 自定义渲染逻辑 #

自行编写初始化代码，指定自定义容器、加载数据并创建cytoscape实例。

修改后的test.html

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>Custom SBGN Demo</title>
  <style>
    body {
      font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
      font-size: 14px;
    }

    #cy2 {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }

    h1 {
      opacity: 0.5;
      font-size: 1em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Custom SBGN Demo</h1>
  <div id="cy2"></div>

  <!-- 按顺序引入全局依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js"></script>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/whatwg-fetch@2.0.3/fetch.js"></script>
  <!-- 自定义模块 -->
  <script src="test_cyto_module.js" type="module"></script>
</body>
</html>

修改后的test_cyto_module.js

// 导入bundle.js默认导出的sbgnStylesheet函数
import sbgnStylesheet from 'https://cdn.jsdelivr.net/gh/PathwayCommons/cytoscape-sbgn-stylesheet@master/build/bundle.js';

function startup() {
  const cytoscape = window.cytoscape;
  const container = document.getElementById('cy2');

  // 加载官方Demo的JSON数据
  fetch('https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/demo.json')
    .then(res => res.json())
    .then(elements => {
      // 创建cytoscape实例
      window.cy = cytoscape({
        container,
        elements,
        layout: { name: 'preset' },
        style: sbgnStylesheet(cytoscape)
      });
    })
    .catch(err => console.error('数据加载失败:', err));
}

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', startup);

关键注意事项 #

• 必须用标准lodash：bundle.js依赖全局_变量，lodash-es是ES模块，不会暴露全局对象，导致memoize找不到
• 避免使用demo.js：它是封装好的演示脚本，硬编码了#cy容器，无法自定义，bundle.js才是库的正确入口
• 跨域问题：直接使用官方CDN上的demo.json，避免本地文件的跨域限制

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