Open nitanagdeote opened 1 month ago
Here's an example, from https://vizhub.com/curran/visualizing-population-centers?edit=files&file=package.json
{
"dependencies": {
"d3": "7.8.2",
"topojson-client": "3.1.0"
},
"license": "MIT",
"vizhub": {
"libraries": {
"d3": {
"global": "d3",
"path": "/dist/d3.min.js"
},
"topojson-client": {
"global": "topojson",
"path": "/dist/topojson-client.min.js"
}
}
}
}
To add a new package as a dependency in VizHub using package.json, you need to know:
The package name and version go under dependencies
, just like a "real" package.json. The browser global and CDN path are configured under vizhub.libraries
, since those are needed by VizHub to pull in the package. The way VizHub pulls in packages is different from the typical npm install
, because it works on the Web and needs to support hot reloading. The way it works is that the VizHub runtime uses the information in package.json
to add <script>
tags to the page that load the libraries in the traditional way, where they expose global variables (browser globals).
Here's an example of the generated script tags, also from https://vizhub.com/curran/visualizing-population-centers
<head>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.2/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
</head>
Then, when the code is built in the VizHub runtime using Rollup, the information of the global variable and package name is used to tell Rollup to resolve imports from those packages to the browser globals. This is why the VizHub builds are so fast, because they do not include all the code of the dependencies, but rather just refer to the globals.
I hope this helps!
How to add Topojson in package.json