How to Import lodash into org?

Question

I'm new to lwc and I'm trying to import an external library - lodash.
I tried some ways and none of them worked for me. I'm probably doing something wrong

I didn't find any good tutorial that shows how to upload and use lodash in lwc.
My questions are:

1. What exactly should I download?
2. How to upload it to salesforce? as a static resource? or just a folder in my project?
3. How to import it and use its functions?

Thanks for any help.

Answer 1

What exactly should I download?

https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/core.min.js

Or

https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.min.js

Depending on what features you need.

How to upload it to salesforce? as a static resource? or just a folder in my project?

You can either choose to use the static resource method:

import LODASH_RESOURCE from '@salesforce/resourceUrl/lodash'
import { loadScript } from 'lightning/platformResourceLoader'
import { LightningElement } from 'lwc'

export default class MyComponentName extends LightningElement {
  _lodashLoaded
  async connectedCallback() {
    await loadScript(this, LODASH_RESOURCE)
    this._lodashLoaded = true
  }
}

Or you can create a new LWC, delete the HTML file, and in the JS file, copy-paste either script from above into the file, and add one final line to your code:

export default _;

This last line allows you to import lodash directly:

import _ from 'c/lodash'

Note that you can't use the uncompressed versions, as files must not exceed 128KiB file size.

How to import it and use its functions?

Importing is discussed above. As for using it, you use it as you would without LWC:

this.users = _.sortBy(this.users, ['user','age'])

(This example is basically a modified example from the docs).

---

Here's a demo for you on webcomponents.dev.