NPM → Salesforce

1. Upload Static Resource

1. Go to Setup → Static Resources
2. Click New Static Resource
3. Enter a Name (e.g., "lodash" or "myPackage")
4. Click Choose File and select your downloaded .js or .zip file
5. Set Cache Control to Public
6. Click Save

Note: Static Resource names are case-sensitive and cannot contain spaces or special characters.

2. Use in Visualforce

Reference the Static Resource in your Visualforce page:

<apex:page>
  <apex:includeScript value="{!$Resource.myPackage}"/>
  <script>
    // Use the library (e.g., lodash)
    const result = _.map([1, 2, 3], n => n * 2);
  </script>
</apex:page>

Replace myPackage with your Static Resource name. If you downloaded a zip, reference the file inside: {!$Resource.myPackage}/filename.min.js

3. Use in Lightning Web Components (LWC)

Import the Static Resource in your LWC JavaScript file:

import { loadScript } from 'lightning/platformResourceLoader';
import myPackage from '@salesforce/resourceUrl/myPackage';

export default class MyComponent extends LightningElement {
  connectedCallback() {
    loadScript(this, myPackage)
      .then(() => {
        // Library is now available
        console.log('Library loaded:', window.myPackage);
      })
      .catch(error => {
        console.error('Error loading library:', error);
      });
  }
}

The library will be available on the window object using the global variable name defined during bundling.

4. Use in Aura Components

Load the Static Resource in your Aura component:

<aura:component>
  <ltng:require scripts="{!$Resource.myPackage}" 
                afterScriptsLoaded="{!c.scriptsLoaded}"/>
  
  <div aura:id="container">
    <!-- Your component markup -->
  </div>
</aura:component>

In your controller:

({
  scriptsLoaded: function(component, event, helper) {
    // Library is now available
    console.log('Library loaded:', window.myPackage);
  }
})