es6 import syntax example? about d3-collection

[pembeci]

Actually, there may be a general page about how to import and use these d3 mini modules for different environments and each module reference can point to that general page at the beginning. Instead of a seperate page, section Supported Environments on d3 wiki homepage can be also used.

[jimmont]

es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead.

you can either use rollup or make all the text substitutions yourself using a script or manually. I use a perl one-liner because I dislike rollup and the extra dependencies were breaking between node 8 and node 10. it is unbelievably strange that this is necessary but I also haven't been supporting a kitchen sink of module loaders.

import * as d3 from "./node_modules/d3-something/index.js"

which has content like export {default as something} from './src/thing'. because these files do not use the natively supported syntax with a full relative path (it's missing the actual file extension), it won't work without rollup or whatever making these corrections. multiple popular projects have made this same decision to require extra modules to work properly and forego native support.

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[mbostock]

es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead.

Yes and no.

Rollup takes ES modules as input, and you can consume those ES modules directly (unbundled) without Rollup if you’re in an environment that supports ES modules.

But Rollup uses a “relaxed” definition of ES modules in regards to the import specifiers (the paths). Part of this is out of necessity—the ES module specification explicitly disallows bare import specifiers; there’s no way to import … from "d3-array" to load a dependency from node_modules. (That doesn’t apply to d3-collection since it has no dependencies.) But also the D3 modules also omit the .js extension on most import specifiers.

For example, unpkg supports this relaxed definition of ES modules and rewrites the import specifiers to absolute paths, making them compatible with browsers and the specification:

<script type="module">

import * as d3 from "https://unpkg.com/d3-collection?module";

console.log(d3);

</script>

[jimmont]

Regarding the missing file extensions perhaps consider a comment about this scenario in Nodejs: https://youtu.be/M3BM9TB-8yA?t=837
And please note that supporting Rollup via unpkg effectively and currently makes these a requirement to use d3 with imports.