问题描述
我维护了两个依赖于cytoscape.js的R包(cyjShiny和RCyjs).我使用webpack和npm构建一个包，然后将其与相对较短的R/Javascript包装器结合在一起.
I maintain two R packages which depend on cytoscape.js (cyjShiny and RCyjs). I use webpack and npm to build a bundle, which I then combine with my relatively short R/Javascript wrapper.
我的问题:我可能每年两次返回软件包，重新运行webpack，请参阅安装1000个模块，请参阅有关已弃用模块的隐式错误报告.然后运行webpack(我从未真正理解过)，如果出现问题，我会挠头，直到找到一条穿越认知丛林的道路.哪怕对丛林或Webpack都没有恶意！
My problem: I return maybe twice yearly to the packages, rerun webpack, see 1000 modules install, see cryptic error reports concerning deprecated modules. Then webpack runs - which I never really understood - and if problems occur, I scratch my head till I have hacked out a path through my cognitive jungle. Which is not to speak ill of either jungles or webpack!
希望的解决方案:我可以定期下载一个文件，一个完整的cytoscape.js，其中包含布局模块和所有依赖项，该文件使用的是最小模块方案(ES6，require，commonJS等)，我可以学到足够的知识来建立一些基本能力.
The hoped for solution: that I can periodically download a single file, a complete cytoscape.js, with layout modules and all dependencies included, which uses a minimal module scheme (ES6, require, commonJS, ...) which I can learn enough about to establish some basic competence.
对于那些使用javascript构建大型Web应用程序的人，我确信webpack，npm和朋友是明智的工具.我不确定在有限的情况下所有这些机制是否有意义.
I am sure that webpack, npm and friends are sensible tools for those building big webapps in javascript. I am not so sure that all that machinery makes sense in my limited case.
Max-有什么建议吗?您是否(或可以)提供完整的&简单，最小假设，单文件版本的cytoscape.js?
Max - any advice? Do you (or could you) offer a complete & simple, minimal-assumptions, single file version of cytoscape.js?
推荐答案
自从我实现了解决方案以来，我将在这里展示它.可以在此处找到包含cytoscape及其布局(cise，dagre，cola和klay)的完成捆绑包 https://github.com/smarek/cytoscape.bundle.js/tree/esbuild/dist
Since I've implemented the solution, i'll present it here. Finished bundle, containing cytoscape along with layouts (cise, dagre, cola and klay) can be found here https://github.com/smarek/cytoscape.bundle.js/tree/esbuild/dist
到目前为止，我已经探索了两种方法(webpack和esbuild)，以后可能会在链接存储库中添加更多方法，并且由于我认为ESBuild解决方案更快，更轻松，因此我将对此进行描述
I've so far explored two ways (webpack and esbuild), more might be added later to linked repository, and since I consider the ESBuild solution faster and easier, i'll describe that
您将需要一个文件，例如称它. app.jsx
You'll need single file, call it eg. 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
我认为这很明显，如何修改捆绑软件中要包含的布局，以及如何删除/添加一些布局
I think it's pretty obvious, how to modify which layouts you want to have in the bundle, and how to remove/add some
这篇关于cytoscape.js最简单的构建系统?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！