问题
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.
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!
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.
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 - any advice? Do you (or could you) offer a complete & simple, minimal-assumptions, single file version of cytoscape.js?
回答1:
max franz gave me the answer, simply pointing me to the proper section at https://js.cytoscape.org.
Which states that fully bundled, all dependencies included minified builds are routinely created in several js forms. See, for example, https://cdnjs.com/libraries/cytoscape
I downloaded cytoscape.min.js, sourced in a script tag, a simple demo works fine. No webpack. No npm. Just right for building a couple of R packages which use cytoscape.js
回答2:
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
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
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
And few commands, preferably use clean/dedicated dir containing only app.jsx file
# 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
Result is cytoscape.bundle.js and 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
来源：https://stackoverflow.com/questions/62417689/simplest-build-system-for-cytoscape-js