How do I install underscore.js?

Question

I am trying to install underscore.js so I can use it in my browser, but it seems all installation instructions are meant for servers. How do I use this in my web browser? I know JS has no import or require so I am not sure what to do. Thanks

Just include the script file. (or use Require.js or Browserify) — SLaks, Jun 15 '14 at 18:27
I'm not sure how to do that to be honest. Specifically, where do I include it from? I'm assuming I need to download it first, but I don't know what folder to place it in. — chopper draw lion4, Jun 15 '14 at 18:29
Yeah, I know that. But I am just trying to use JS in my browser, not running it from my HTML. — chopper draw lion4, Jun 15 '14 at 18:31
You should serve it the same way you serve other files on your site (CSS, JS, HTML, JPG). — joeytwiddle, Jun 15 '14 at 18:32
In chrome: View>Developer>Javascript Console In other words, I am trying to use it in my javascript console because I want to use underscore.js in interactive mode so I can play with some of the functions — chopper draw lion4, Jun 15 '14 at 18:33
If you just want to play with it, the easiest way is to setup an environment that loads it. E.g. make a `testing.html` file that loads underscore, then visit that page in your browser. — joeytwiddle, Jun 15 '14 at 18:34
If you just want to play with it then jsfiddle.net or jsbin.com might be the easiest options. — mu is too short, Jun 15 '14 at 18:36
If you want it on every page, you might be looking for an addon like this: http://wiki.greasespot.net/FAQ — Keen, Jun 15 '14 at 19:04
@chopperdrawlion4: Just visit the http://underscorejs.org/ homepage and open the console there. It's loaded in that page so that you can play around with it — Bergi, Jun 15 '14 at 19:22

score 8 · Answer 1 · edited Aug 09 '18 at 04:48

Open some webpage in Google chrome or Mozilla Firefox. For example, google.com.
And then press F12 key.
Select Console Tab.And the type or Copy-paste the following code:

var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'; document.head.appendChild(script);

and press Enter.

Then start typing your underscore js commands on the console.

keenthinker · Answer 2 · 2014-06-15T19:33:32.547

You don't install a JavaScript library in order to use it - you need to include it. If you have dependencies, then only the order (for example first underscore.js and then your custom library that uses underscore.js) is important. One possibility would be to use some Content Delivery Network (CDN), so you don't need to download the library locally. Common CDN's are:

If you download the library and host it on your server, than just put it in your project directory (or in a directory called scripts).

The code that includes the underscore.js library used from a custom library could look like this:

JS library demo.js

// function using underscore.js
function demo() {
    var input = [1, 2, 3];
    var output = _.map(input, function(item) {
            return item * 2;
    });
    alert(input + " - " + output);
}

and then in a second file demo.html:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- first include the underscore.js library -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js" type="text/javascript"></script>
        <!-- or if the file is downloaded locally -->
        <!-- <script src="scripts/underscore.js" type="text/javascript"></script>-->
        <!-- then the custom JS library -->
        <script src="demo.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- call the custom library function -->
        <a href="#" onclick="demo();">Start the script using underscore.js</a>
    </body>
</html>

The output is as expected:

1,2,3 - 2,4,6

Nelliusz Frącek · Answer 3 · 2015-06-07T19:28:41.563

4

Just paste following code into head section of your .html file.

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3  /underscore-min.js">
</script>

edited Jun 07 '15 at 19:28

answered Jun 07 '15 at 19:08

Nelliusz Frącek

41
4

Harsh Gupta · Accepted Answer · 2014-06-16T05:41:47.990

Please include what browser you are using, but few things come to mind:

Head over to JSFiddle or JSBin or other alternatives, include or select the JS framework you want to use and play with it.
Using JS in a browser means nothing. There's got to be some HTML code involved that could use and understand JS code.
- Firefox, install addon like Firebug, open a simple page like one of SO or google.com and in the console
  
  var script = document.createElement("script"); script.src = "http://path/to/underscor.js"; document.body.appendChild(script);
  
  Then you could start using functions in your JS file.
- Google Chrome, click F-12, go to Sources tab, click on Content Scripts in left panel, right click to add folder containing your JS files. That should work as well. There is also another sub-tab called snippets in left panel, create a new file and just copy paste entire JS file into it. Alternatively, you could follow the same technique for Firefox. Its Developer Panel is much more advanced and sophisticated.
You can try and look at things like Browserify.

The gist is, you need some kind of HTML to invoke and use JS code. IMHO, tools like JSFiddle are much better at using and testing some JS code and involves less hassle. Or just create a simple HTML file on your system, include a script tag and test it.

HTH

Firefox (since version 4?) has come with a _JavaScript console_ (ctrl + shift + K) which means firebug is not "necessary" to do this type of action. — Paul S., Jun 15 '14 at 19:17
I know, I mentioned Firebug as I found FF JS Console a bit lacking initially. Now since you mentioned it, I will try using it once and see if I could let go of Firebug. Thank you. — Harsh Gupta, Jun 15 '14 at 19:39
Thanks, solution worked perfectly! Just wondering, is there any detriment to including it this way when you are not using something like node.js ? — ocean800, Aug 23 '16 at 20:40

score 0 · Answer 5 · answered Jun 15 '14 at 18:31

You should just be able to load it using a <script> tag. Looking at the code shows it will load itself into the global object (window == this).

  var root = this;

  ...

  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }

How do I install underscore.js?

5 Answers5