最简单的 cytoscape.js 构建系统？答案

【问题标题】：simplest build system for cytoscape.js?最简单的 cytoscape.js 构建系统？
【发布时间】：2020-06-16 21:12:51
【问题描述】：

我维护了两个依赖于 cytoscape.js 的 R 包（cyjShiny 和 RCyjs）。我使用 webpack 和 npm 构建一个包，然后将其与我相对较短的 R/Javascript 包装器结合起来。

我的问题：我可能每年两次返回软件包，重新运行 webpack，查看 1000 个模块安装，查看有关已弃用模块的神秘错误报告。然后 webpack 运行 - 我从来没有真正理解过 - 如果出现问题，我会挠头，直到我在我的认知丛林中开辟出一条道路。这不是说丛林或 webpack 的坏话！

希望的解决方案：我可以定期下载单个文件，一个完整的 cytoscape.js，其中包含布局模块和所有依赖项，它使用最小的模块方案（ES6，require，commonJS，...），我可以学到足够的知识来建立一些基本的能力。

我确信 webpack、npm 和朋友是那些用 javascript 构建大型 webapps 的明智工具。我不太确定所有这些机制在我有限的情况下是否有意义。

Max - 有什么建议吗？您（或者您能否）提供一个完整且简单、假设最少的单一文件版本的 cytoscape.js？

【问题讨论】：

标签： webpack cytoscape.js

【解决方案1】：

max franz 给了我答案，只是将我指向正确的部分https://js.cytoscape.org。

这表明完全捆绑的所有依赖项包括缩小的构建通常以几种 js 形式创建。例如，请参阅https://cdnjs.com/libraries/cytoscape

我下载了 cytoscape.min.js，来源于一个脚本标签，一个简单的演示工作正常。没有网页包。没有 npm。适合构建几个使用 cytoscape.js 的 R 包

【讨论】：

这不包括依赖关系，例如布局扩展（例如cise 和必需的avsdf-base, layout-base, cose-base 模块）。您是否也解决了依赖关系问题？
Marek：目前我没有使用任何扩展，只是为了让事情尽可能简单。
昨天我实际上得到了可乐、cise、dagre 和 klay 布局。 Webpack (branch master) 或 ESBuild (branch esbuild) github.com/smarek/cytoscape.bundle.js 。在我看来，这不是一个明确的解决方案，但可用的开始

【解决方案2】：

由于我已经实施了解决方案，我将在此处介绍它。完成的包，包含 cytoscape 以及布局（cise、dagre、cola 和 klay）可以在这里找到https://github.com/smarek/cytoscape.bundle.js/tree/esbuild/dist

到目前为止，我已经探索了两种方法（webpack 和 esbuild），以后可能会在链接存储库中添加更多方法，并且由于我认为 ESBuild 解决方案更快更容易，我将对其进行描述

您需要单个文件，例如调用它。 app.jsx

import cytoscape from 'cytoscape'
import cise from 'cytoscape-cise'
import dagre from 'cytoscape-dagre'
import cola from 'cytoscape-cola'
import klay from 'cytoscape-klay'

cytoscape.use(cise)
cytoscape.use(dagre)
cytoscape.use(cola)
cytoscape.use(klay)

globalThis.cytoscape = cytoscape

而且命令很少，最好使用只包含 app.jsx 文件的干净/专用目录

# you can use your favorite package manager, i'll use yarn
# important is that `node_modules` contains the cytoscape and dependencies required in the app.jsx
yarn add cytoscape cytoscape-klay cytoscape-cola cytoscape-cise cytoscape-dagre
# this will use jsx file to create the app and bundle it for browsers as listed
esbuild app.jsx --bundle --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=cytoscape.bundle.js

结果是cytoscape.bundle.js 和cytoscape.bundle.js.map

我认为这很明显，如何修改你想要在包中包含的布局，以及如何删除/添加一些

【讨论】：