The only script you will ever need to use an npm package in LWC. This script faciliates installation, and ease of usage by removing ambiguities around how you would refer to the loaded modules in your LWC.
Important: The script does not magically make a library locker-service compatible. The library won't work correctly if it is not locker-service compatible.
- Bash shell (with
curl
) - NodeJS and NPM
- Salesforce CLI
Download the script and copy it to your sfdx project root folder. Run ./npmtolwc.sh <list of modules to include in your static resource> <optional flags>
./npmtolwc.sh
without any arguments will show you the list of flags and usage instructions.
-
Running
./npmtolwc.sh d3-scale,d3-time -s time
will create a static resource file namedtime
in your project'sstaticResources
folder. The name of the library inside the static resource would bed3scale_d3time
. After importing the resource in your LWC you can use the functions ind3-scale
with the syntaxd3scale_d3time.d3scale.<function name>
-
Running
./npmtolwc.sh d3-scale,d3-time -s time -l timescale
will create a static resource file namedtime
in your project'sstaticresources
folder. The name of the library inside the static resource would betimescale
. After importing the resource in your LWC you can use the functions ind3-scale
with the syntaxtimescale.d3scale.<function name>
- A single command to convert any npm package to an LWC-ready static resource.
- Import multiple modules (related or unrelated) into a single static resource file.
- Clear instructions on how to refer to the module(s) in your LWC once loaded.
The script might take a bit longer to run the first time as it downloads webpack
and other dependencies.