Anyone who's developed with Salesforce DX (SFDX) knows that package management via static resources is a huge pain. Essentially, static resources is for storing content such as JavaScript or images you need to reference elsewhere in Salesforce, like within a lightning component.

In the case of JavaScript libraries, you have to store them within static resources to be able to reference elsewhere. Manually keeping all your libraries up to date is painful. You gotta manually check for updates, uploading newer libraries and repeat * ∞. Yikes 😳

Enter npm and yarn JavaScript dependency managment tools.

How?

1. Get either package manager installed and initialize a project in your SFDX directory
2. Get the JavaScript packages that you want to utilize in Salesforce installed
3. Install cpx using yarn/npm by doing a yarn/npm install cpx --save

• cpx is a JavaScript tool for file copying. We'll be using this to move files from node_modules/ (where packages are installed), to the staticresources/ folder

4. Create a folder for your resource within force-app/main/default/staticresources/ named $resourceName

• Make sure you don't commit the contents of this folder to source control, because otherwise what's the point?

5. Create accompanying metadata file in force-app/main/default/staticresources/ named $resourceName.resource-meta.xml with the following structure:

<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>application/x-zip-compressed</contentType>
    <description>$description</description>
</StaticResource>

6. Write a script in under the scripts: {} section of package.json called copy-$resourceName to copy the contents of the installed package from node_modules/ into staticresources/

• Here's an example script to move jquery from node_modules/ to staticresources/:

"copy-jquery": "cpx \"node_modules/jquery/dist/jquery.min.js\" \"force-app/main/default/staticresources/jQuery/\""`

7. Do a yarn run copy-$resourceName + push to your org and you should see an entry on the Static Resources page under Setup with a new entry!

That's all! Easy peasy :)

Learn more about Static Resources here: https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals/visualforce_static_resources