Reference node_module after running browserify

Question

I found a nodejs module that I would love to be able to include in my Angular app. I read around and saw that I can do this by running browserify on it. After doing this, I have referenced the new file in my html, but I don't know what to do after that. Where do I need to reference it to get it in angular scope? Here is the github repo I want to be able to access

https://github.com/whatadewitt/yfsapi

After I browserify the files in the node_modules folder, I have one big js file. The usage for this in Node is

var YahooFantasy = require('yahoo-fantasy');
// you can get an application key/secret by creating a new application on Yahoo!
var yf = new YahooFantasy(
               Y!APPLICATION_KEY,
               Y!APPLICATION_SECRET
);

It seems it needs a require here, but isn't that the whole reason I ran browserify in the first place? What am I missing here?

score 0 · Answer 1 · answered Oct 19 '16 at 01:56

From the Browserify website:

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

The point of Browserify is to give you a module system in the browser and to allow you to require files. It's incredibly useful and allows you to easily include Node modules and modularize your own app.

To use the Node module you're referencing in an Angular app, you would do basically exactly what the demo shows in either a controller or service. Personally, I'd probably recommend creating a service that wraps the Node module and exposes methods to interact with the Yahoo Fantasy servers; I probably wouldn't put it on $scope unless you absolutely had to for some reason.

Here's some pseudo-ish code:

var yf = require('yahoo-fantasy');

function YFantasyService (<dependencies>) {
  this.someMethod = function () {
    return yf.doStuff();
  }
}

YFantasyService.$inject = [<dependencies>];

module.exports = YFantasyService;

Register your service (this is how my app is structured...there are plenty of other ways to write and register services but you get the idea):

angular.module('YFantasyApp', [<dependencies>])
  .service('YFantasyService', require('./YFantasyService'));

Then inject it into other services and controllers and do whatever you want with it.

Thanks for this, but I am still a little confused. I ran browserify, but if I put require anywhere in my angular code, I get "require is not defined". I thought that running the cmd and including the file made it so you can use require. Here is a link to the generated file https://drive.google.com/open?id=0BxB-19VLAr8SdlhtbE1yV29ZYk0 — Isaac Levin, Oct 19 '16 at 12:32
I don't know for sure, but I'd suspect you have an issue [like this](http://stackoverflow.com/questions/28696511/require-is-not-defined-error-with-browserify). Browserify will build a bundled file for you and `require` is only defined in this bundled file's scope. You can still use `require` in your source code since it will be defined by the time your bundle is run, but if you're including anything that references `require` outside of your bundled file, you will get this undefined error. Posting your `index.html` file will be more helpful than the generated file. — Ryan Hamley, Oct 20 '16 at 17:31
I figured it out, I had to browserify the angular code that calls into that module... Not quite what I was hoping. — Isaac Levin, Oct 20 '16 at 17:32

score 0 · Answer 2 · answered Oct 19 '16 at 02:25

If you want to build a bundle that contains yahoo-fantasy - so that you can use it with minimal changes to your existing code - you can use the Browserify API:

var browserify = require("browserify");

browserify()
    .require("yahoo-fantasy", { expose: "yahoo-fantasy" })
    .bundle()
    .pipe(process.stdout);

That will generate a bundle that contains yahoo-fantasy module and all of its dependencies and will expose a global require function that you can call to access said module:

<!doctype html>
<html>
<head>
    <title>so-40120643</title>
</head>
<body>
    <script src="./bundle.js"></script>
    <script>
        console.log(require("yahoo-fantasy"));
    </script>
</body>
</html>

If you want to use a different name for the global require function, you can use Browserify's externalRequireName option.

Reference node_module after running browserify

2 Answers2