Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use npm installed requireJS for browser

While requirejs is capable of using npm-installed modules, how do I use requirejs in first place if itself is installed via npm install requirejs?

I have read examples of using requirejs listed in the example-section. They all seems to assume require.js is downloaded into a specific location. Since the documentation specifically said

do not do something like require("./node_modules/foo/foo").

I guess it is not right to put in index.html something like:

<html>     <head>         <script data-main="scripts" src="node_modules/requirejs/require.js"></script>     </head>     <body>         <h1>Hello World</h1>     </body> </html> 

What is the recommended way to use requirejs if it is npm-installed? If I missed something from the documentation please let me know. Thank you

like image 529
user2829759 Avatar asked Feb 15 '16 09:02

user2829759


People also ask

How do I use npm with RequireJS?

How can you use a RequireJS installed through Node in the browser? You can just install it with npm install requirejs , and then you have your HTML file have a script element that points to node_modules/requirejs/require. js . Exactly as you show in your code snippet.

Can I use npm module in browser?

If you simply want to test out some NPM modules right inside your browser without setting up an entire app, you can use Browserify in three simple steps to use NPM modules.

How do I run RequireJS?

RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. To include the Require. js file, you need to add the script tag in the html file.

How do I use RequireJS in node JS?

To use the node, you need to have require('requirejs') and move the require function in the configuration to the top level main. js file.


1 Answers

It looks like you are conflating a bunch of different uses of RequireJS:

  1. How can you use a RequireJS installed through Node in the browser?

    You can just install it with npm install requirejs, and then you have your HTML file have a script element that points to node_modules/requirejs/require.js. Exactly as you show in your code snippet. That's all there is to it. This being said, I don't like to have node_modules in what I deploy, so I typically have my build process copy require.js elsewhere.

  2. How can you load npm-installed modules with RequireJS in Node?

    Suppose without RequireJS you would load the module foo by doing require('foo'). You install RequireJS and load it as requirejs. How do you load foo using RequireJS? You can just do requirejs('foo'). So long as RequireJS does not find it through its own configuration, it will issue as a last resort a call to Node's own require, and will load it this way? Here's an illustration. Install RequireJS with npm install requirejs. Create this file:

    var requirejs = require("requirejs");  var fs = requirejs("fs"); console.log(fs); 

    Then run it. You'll get on the console Node's fs module.

  3. How can you load npm-installed modules with RequireJS in a browser?

    It depends on the modules. RequireJS does not contain code that will magically make a npm-installed module work in the browser. It ultimately depends on how the modules are structured. Some cases:

    A. Some npm-installed modules can be loaded with RequireJS without modification. There's one library I've authored which is distributed through npm and yet is a collection of AMD modules. It is trivial to load them with RequireJS in the browser.

    B. It may require being wrapped in define calls. I've recently loaded merge-options in one of my projects with gulp-wrap-amd. merge-options is a CommonJS module. It does not support RequireJS out-of-the-box but if you wrap it with a define call, it will work.

    C. It may require something more complex before it will be loaded in a browser. For instance, if a module relies on Node's fs module, you'll have to provide a replacement for fs that runs in a browser. It will presumably present a fake filesystem to your code.

like image 91
Louis Avatar answered Sep 23 '22 19:09

Louis