CODEWITHSUNDEEP
node.jsrequirejs
themirror
themirror

Reputation: 10287

How do I find what parts of an npm package work in the browser, and which don't?

As I understand it, almost all NPM packages (i.e. listed on npmjs.org) work like a charm inside a browser, using a loader such as Require.js. But obviously some features of NPM packages (for example, accessing the OS filesystem) cannot be used inside the browser, which I assume results in ungraceful errors if it's attempted.

  1. How correct is my understanding?
  2. Are there any ways of finding out exactly which methods inside an NPM package will work in the browser and which won't?

Upvotes: 3

Views: 1504

Answers (2)

danielepolencic
danielepolencic

Reputation: 5183

As I understand it, almost all NPM packages (i.e. listed on npmjs.org) work like a charm inside a browser, using a loader such as Require.js.

Generally speaking npm modules are exposed as CommonJS modules and can't be used in the browser unless you use something like Browserify. However, If the module exposes itself as a CommonJS AND AMD module, than it can be used in the browser using an AMD loader (such as RequireJS). You can figure out if a module is AMD compatible if there's something similar to this snippet in the codebase:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(this, function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

You can find more information about CommonJS, AMD and UMD here.

But obviously some features of NPM packages (for example, accessing the OS filesystem) cannot be used inside the browser, which I assume results in ungraceful errors if it's attempted.

You're right, most of the NPM modules for IO don't work in the browser. If you plan to use CommonJS modules in the browser using Browserify, have a look at the list of compatible modules on Browserify.

Upvotes: 3

gustavohenke
gustavohenke

Reputation: 41440

Actually, I believe that when using something like Browserify, you can require nearly every package without much problems... according to Browserify docs:

Many npm modules that don't do IO will just work after being browserified. Others take more work.

Many node built-in modules have been wrapped to work in the browser, but only when you explicitly require() or use their functionality.

However, I'm not experienced with Browserify so I can't ensure it to you; but I can surely say that it would be an extra layer in any app. "Does it need it?" should be asked in such moment.

As I'm a guy who prefer to manage only Node.js packages with npm, I'm against trying to use them in a browser this way.
Most browser compatible packages will notify the user when they are tested for such purpose (non-tested packages don't deserve being used! mwahahah!).

Upvotes: 1

Related Questions