Accessing lodash from a JavaScript file

I’m going over the lodash project in JavaScript Syntax, Part II. I just want to be able to use the lodash functions we’re talking about in my own javascript file in Visual Studio. All I can find doing a search is to use Node.js or html tags. Isn’t there an easier way to do it? The lodash website opens a tab with a bunch of code, so can’t I just make that a javascript file in the same folder, and access it using import or something?

Funny, I’ve never tried to use the library we created. It’s odd that the lesson doesn’t go into how to implement it on our own. That sort of information would be immensely helpful, I’m sure.

@lilybird, anybody in curriculum willing to take on this assignment?

1 Like

I’ll raise this to the team now! Thanks, guys.

1 Like

Hi @eric-heim have you ever had a useful answer to this question?
I never understood how to import lodash into VS Code. My questions are:

  • What exactly do I need to download from the lodash website and where do I need to save it locally?
  • Do I have to do something at the beginning of every .js file if I want to use lodash in or is there a way to ‘install’ lodash and have it always available for any project I start?

It would be great if someone could explain this in detail to me (perhaps @lilybird could you help or put me in touch with someone that could?).

Many Thanks!

Hi @brandas, the most straightforward way to use Lodash in projects that you are developing on your own is by adding a <script> tag into the <head> of your index.html file that links to Lodash via a Content Delivery Network (CDN), like so (this is also shown at the top of this project’s intro):

<head>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
  <!-- Make sure that you load lodash before the file that uses it. -->
  <script src="file-that-uses-lodash.js"></script>
</head>

You can also download the code directly by:

  1. Going to the lodash website
  2. Clicking on the Core Build (or full build) link
  3. Saving the file (Ctrl + S or CMD + S) as lodash.js and moving it into your project’s root folder.
  4. Referencing the local lodash.js file like so:
<head>
  <script src="lodash.js"></script>
  <!-- Make sure that you load lodash before the file that uses it. -->
  <script src="file-that-uses-lodash.js"></script>
</head>

I hope this helps but let us know if you could use some further clarification!

2 Likes

Hi @bspex.

Thanks a lot! This is very clear and helpful!

Just one more question… Let’s say I’m only doing some js exercises and that my project only has a .js file. Can I still use the Lodash methods even if I don’t have an index.html file?

Cheers!

@brandas - The short answer is yes but it depends on how you are running that .js file on your computer. One easy way to run your code is by running it in a browser. To do this you can:

  • Create an index.html file with just the code from the first code snippet. Make sure its in the same folder as your .js file.
  • Open up your favorite browser (I recommend Chrome) and open the index.html file (Ctrl + O or CMD +O).
  • If you are using console.log() statements you can see them by opening up the Developer tools.

The alternative (using Node in the terminal) involves some other syntax which is outlined in the website

2 Likes

Thanks again @bspex. I use VS Code and I have the Code Runner extension which allows me to run my .js files.

Gotcha. Using the Code Runner extension will require the same steps as if you are using node. Here’s an article explaining how to set up Node if you haven’t already.

Open the VS Code terminal and install lodash using the npm commands below:

npm install -g lodash
npm install --save lodash

Then, in your .js file you can load lodash using require():

var _ = require('lodash');

console.log(_.toUpper('hello world'));
// Prints HELLO WORLD

require() will automatically look in a special folder where packages downloaded via npm are stored called node_modules. You can also use it to reference locally downloaded files. This means that if you had downloaded the lodash.js file directly, you could use it like so:

var _ = require('./lodash.js');

console.log(_.toUpper('hello world'));
// Prints HELLO WORLD

Hi @bspex this worked!! Thanks a lot :slight_smile:

So just to make sure, from now on, every time I want to use Lodash on a js file I just include var _ = require('lodash'); at the beginning and I’m good to go. Otherwise, if I have an index.html I use the code that links to lodash via CDN. Is this correct?

Cheers.

1 Like

Exactly! Though I want to clarify something that depending on where you are in your learning may not make sense:

The -g part in the command npm install -g lodash is a “global” flag, meaning that it will install lodash into a node_modules folder for your entire computer so every project will be able to access that package.

That being said, as explained in this StackOverflow post, typically, you should install project-specific packages like this WITHOUT the -g flag which installs it locally into the working directory. In this way, you would have to install it for each project that uses lodash.

Understood. Thank you so much for your help! :star_struck:

1 Like