How to fetch modules from npm as standalone AMD/CommonJS modules

0
votes

So, I'm not using Node or WebPack serverside, but would still like to use modules from npm every now and then. My clientside uses requirejs, so I would need the modules in either AMD (preferred) or CommonJS.

What I want to archieve is a script that takes the module name + "external dependencies" as arguments and creates a module that contains all the other deps.

E.g.

sh npmtoamd.sh draft-js react react-dom

It creates an ES5 AMD module that contains draft-js and all of it's dependencies excluding react and react-dom. If it's not possible to eg. include css files and other non-js content in the module, providing them in eg. draft-js.css is tolerable.

While I don't use Node or Webpack serverside, we can use npm and webpack in the said script.

Fetching the module from npm is the trivial part, but I'm pretty lost in how to do the webpack parts. I know for a fact that it's possible though, as I managed to do it earlier with help, just don't have it down anywhere and no idea how it went.

2
node.jsnpmwebpackamdcommonjs
Check out browserify. – Aleksei Zabrodskii

2 Answers

1
votes

I think as elmigranto commented, Browserify is what you're looking for. Unlike its name implies, it can be used in both the browser environment and the node environment. In a nutshell, it does this:

Browserify starts at the entry point files that you give it and searches for any require() calls it finds using static analysis of the source code's abstract syntax tree.

For every require() call with a string in it, browserify resolves those module strings to file paths and then searches those file paths for require() calls recursively until the entire dependency graph is visited.

Each file is concatenated into a single javascript file with a minimal require() definition that maps the statically-resolved names to internal IDs.

This means that the bundle you generate is completely self-contained and has everything your application needs to work with a pretty negligible overhead.

If you check out some of the demos you can see that all the dependencies (and their co-dependencies) are bundled into one file.
A simple example:

browserify main.js -o bundle.js

In regards to using AMD as well Browserify supports it by using deamdify.
Using AMD modules:

browserify -t deamdify main.js -o bundle.js
0
votes

I ended up doing the npm fetch thingy in java instead of a batch script and finally got it working. Didn't get browserify to work however.

Heres what I do:

  1. creating the following webpack.config.js

    module.exports = {
    entry: './main.js',
    output: {
    filename: 'bundle.js',
    library:"<modulename>",
    libraryTarget:"amd"       
},
externals: {

        react: "React",
    "react-dom": "ReactDOM",
    immutable:"Immutable",
    moment:"Moment"
    }   

};

  2. npm install <modulename>

  3. Creating the following main.js

    define('FOOBAR', ['<modulename>'], function(Foo) {
   return Foo;
});

  4. Running webpack main.js