-
Notifications
You must be signed in to change notification settings - Fork 352
How to bundle for legacy browsers?
Since the 1.11.0
release, the d3
dependency is updated to be as separated used d3 modules only. (Ref. #1054)
NOTE:
To improve for those can't apply solutions described in this document, downgraded the dependency moduled3-scale
tov2.x
sincev1.12.3
, where this issue comes. (Ref. d3-scale v3 release note)
From this change, when import billboard.js, the dependent d3 modules will be concatenated & bundled in your build from the node_modules
.
If use webpack
as bundler, generally node_modules
is pointed to be excluded from the loader boundary, where this issue comes. This issue will not have effect if you include directly via <script>
tag. Only is happening when import as ESM and is targeting for old IEs.
So, there're two possible solutions on this.
When your bundler(ex. webpack) configuration set is excluding node_modules
, update to include d3-
modules giving below configuration.
// webpack.config.js
module: {
rules: [
{
test: /(\.js)$/,
exclude: {
test: /node_modules/,
not: [/(d3\-.*)$/]
},
use: {
loader: "babel-loader"
},
},
...
],
}
You can apply your own optimized configuration for dependent modules.
You might need to handle all of possible legacy related polyfills and transformation needed.
If you don't want to handle all possible configuration for legacy browsers, just use packaged build.
import {bb} from "billboard.js/dist/billboard.pkgd";
bb.generate(...);
In this case, you need to add on your bundler configuration to not concatenate d3
modules, because packaged build already contains them.
// webpack.config.
externals: /^(d3\-.*)$/i,
Get rid all the headache configuration for the legacy environment.
Might possibly make bigger the build size, because of polyfills.
- Why we decided to start billboard.js?
- Comparison table
- How to migrate from C3.js?
- Who's using billboard.js
- Third party applications
- Themes
- Roadmap
- Architecture & Event
- Plugin Interface
- Release workflow
- How behaves for dynamic loading?
- How tooltip behaves on grouped option?
- How to load as ESM directly from the browser?
- How to implement realtime chart?
- How to bundle for legacy browsers?
- How to generate chart image in Node.js environment?
- Understanding padding