New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a minified all-inclusive ES6 module build #2530
Conversation
If we expose the esm build as the Until webpack fixes this issue we can't support You have to configure webpack to alias |
Here's a relevant issue: webpack/webpack#4742 |
Of course! I'd only thought of Although I've also supplemented the documentation a bit, but I'm not quite sure if it's okay to feature the ES6 module so prominently.
Thank you very much for the explanation, now I understand why you bother with a separate esm build. |
Node apparently will consider all |
I think I found a compromise. There is an ES6 module-version of |
Speak of the devil. |
documentation/md/getting-started.md
Outdated
|
||
```html | ||
<script src="cytoscape.min.js"></script> | ||
<!--Or as an ES6 module--> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The second example should probably be in a separate code block to indicate it's a different example.
The import
line shouldn't include the dist
part, or people will think they can link directly to the repo.
package.json
Outdated
@@ -89,6 +89,7 @@ | |||
"main": "dist/cytoscape.cjs.js", | |||
"unpkg": "dist/cytoscape.min.js", | |||
"jsdelivr": "dist/cytoscape.min.js", | |||
"module": "dist/cytoscape.esm.js", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's not include the module
field until webpack issues are resolved. The documentation could be updated to indicate that an alias needs to be used for ESM support with webpack or rollup.
package.json
Outdated
@@ -111,7 +112,7 @@ | |||
"watch:build:umd": "cross-env FILE=umd SOURCEMAPS=true NODE_ENV=development rollup -c -w", | |||
"watch:build:cjs": "cross-env FILE=cjs SOURCEMAPS=true NODE_ENV=development rollup -c -w", | |||
"test": "mocha -r esm --recursive", | |||
"test:build": "cross-env TEST_BUILD=true mocha", | |||
"test:build": "cross-env TEST_BUILD=true mocha -r esm", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should not include -r esm
. The point of this test is to test the built bundle as consumed by node. There should be no ES modules in the tested bundle.
package.json
Outdated
@@ -158,6 +159,6 @@ | |||
}, | |||
"dependencies": { | |||
"heap": "^0.2.6", | |||
"lodash.debounce": "^4.0.8" | |||
"lodash-es": "^4.17.15" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changing to lodash-es
may cause issues with CJS apps.
rollup.config.js
Outdated
@@ -94,9 +113,10 @@ const configs = [ | |||
{ | |||
input, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This esm.js
bundle should probably be left the same as it is in 3.10
Thank you very much for your patience, I had gotten a little bit ahead of myself with the esm changes. Sorry! The documentation now makes a clear distinction between the two scenarios. |
@@ -98,7 +98,7 @@ | |||
"build:min": "cross-env FILE=min rollup -c", | |||
"clean": "rimraf build/*", | |||
"copyright": "node -r esm license-update", | |||
"dist:copy": "cpy build/cytoscape.umd.js build/cytoscape.min.js build/cytoscape.cjs.js build/cytoscape.esm.js dist", | |||
"dist:copy": "cpy build/cytoscape.umd.js build/cytoscape.min.js build/cytoscape.cjs.js build/cytoscape.esm.js build/cytoscape.esm.min.js build/cytoscape.esm.min.js.map dist", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's not include the map file. It's more useful for debugging than production. Many packages don't include sourcemaps for prod, e.g. https://unpkg.com/browse/lodash@4.17.15/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There should also be something like a build:esm.min
script
output: { | ||
file: 'build/cytoscape.esm.min.js', | ||
format: 'es', | ||
sourcemap: true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Again, let's turn off the sourcemap
…ranch Ref : Add a minified all-inclusive ES6 module build #2530
Ref : Add a minified all-inclusive ES6 module build #2530
@TpmKranz I've applied the changes on the unstable branch. |
@TpmKranz -- thanks for the PR! |
I've tried using cytoscape.js as an ES6 module from unpkg.com as follows:
This didn't work because, as unpkg.com puts it,
Package heap@0.2.6 does not contain an ES module
, the same forlodash.debounce@4.0.8
.Apparently, the esm build is not for direct (bundler-less) consumption by an ES6
import
.I'd therefore kindly ask you to include such a build alongside the min one, so that folks can use either the old
or the ES6
way of including cytoscape.js.
This PR adds such a build target and calls it
cytoscape.mes.js
, so as not to interfere withcytoscape.esm.js
, which surely should not simply be replaced.BTW, could someone point me towards the purpose of that esm build compared to, say, the umd build? It seems to me that at least webpack is completely oblivious to the ES6-ness of an
import
ed module.