In the data-main require js file, we write like this:
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore'
}
What I did was manually download the row JS library files and make "lib" folder and move the file into the folder and change the file name if necessary.
I use Nodejs for server, and I am wondering if there's any tool to create these client-side Require path files automatically from the installed Node-Modules. Browserify does a similar job if I don't user Require (creating one JS file, and call it in the other browser JS files.) But it seems like Browserify cannot be used as a path in Require.
Any thoughts? Thanks.
An alternative solution (to browserify, with which I'm not familiar) is to use bower for managing client side libraries. It is similar to node/npm, but is geared towards browser libraries.
It will not copy or rename libraries, because that step isn't necessary. Instead the libraries will be placed in a directory called bower_components. The paths config would look like
paths: {
jquery: "../../bower_components/jquery/dist/jquery",
bootstrap: "../../bower_components/bootstrap/dist/js/bootstrap",
...
}
(the actual number of .. in the path depends on values of other requirejs options).
In development, when all dependencies are loaded asynchronously as separate files they will be loaded from bower_components and requirejs optimizer will find them there when generating the optimized single source.
Adding the dependency paths to the config file can be half-automated with grunt plugin grunt-bower-requirejs. The idea is that after a library is installed using bower install LIBRARY it's path can be added with grunt bower.
Related
When I build a node add-on by creating a standard binding.gyp and running node-gyp build, the addon.node library is created in the subdirectory build/{Release|Debug}/. When I write tests or other javascript code to use this module, I have to give explicit path to the library location
For example,
var addon = require('./build/Release/addon')
However, I would like to do this by only specifying the module name and let node's module search for the library
var addon = require('addon')
How can that be achieved?
I believe the only way to do this is setting require() and having the module in the node_modules folder or having the module in a node_modules folder in one of the parent directories.
Node uses the require() method with no path defined as an indicator to look for the module in the node_modules directory. Unless its an native module.
Its detailed in the docs here.
There's a module for that if you're okay with another dependency.
https://www.npmjs.com/package/bindings
That will search all of the possible build output locations automatically, including debug and release directories.
I'm trying to figure out how to get webpack to watch an NPM linked dependency. I've tried to add an explicit entry pointing into the package, and I've tried to both explicitly included it and also not excluding /node_modules/ (which is quite common).
The scenario I want to achieve is as follows: I want to separate out parts of my react-based applications into component libraries (NPM packages).
Both the main package and the dependencies are written in ES6, so I've created a small gulp script that watches for changes in the dependent project, and transpiles its source (src/) to lib.
I've used npm link to wire in the dependent package so that I don't need to pack/publish/reinstall it every time I make a change.
When I make changes to the dependent package, the gulp tasks transpiles the code OK.
It is in the last part I am struggling; getting webpack watch to trigger a re-bundling when the dependency is refreshed by the forementioneds gulp task.
Make sure you transpiler script doesn't delete your old /lib dir, but overwrites files instead.
I had a similar problem with Webpack dev server not seeing changes because I was removing the /lib dir before every transpile.
After upgrade to Play 2.3, requirejs is able to bundle and unglify all paths into the one main file ONLY if the path's come from a webjar.
Ie. if the config section of my require loos like this
paths: {
bacon: '../lib/baconjs/Bacon.min', // comes from "org.webjars" % "baconjs" % "0.7.2"
'bacon.model': 'libs/bacon.model-0.1.6'
Then Bacon.min.js is correctly bundled into my main.js file but the bacon.model library is downloaded separately via a http call.
I have a bunch of javascript depedencies that are not yet "webjared" so I am trying to find and easy way around this instead of making webjars of all dependancies not provided by webjars.org
I've installed backbone via npm, it is placed in node_modules folder (not in web root) how can i include it in my index.html file?
It's possible to write front-end code entirely based on CommonJS (i.e. Node-style) modules.
If you install front-end dependencies through npm you can use a package bundling tool like Browserify to bundle all dependencies into one file. This way you can use the browser-dependent packages in the same way you use server-side packages: with Node's require function. You just require a module (either in node_modules dir or a regular file) and work with it.
Base use of browserify is really simple: Just do browserify clientcode.js > webroot/clientbundle.js, where webroot is your web root. Then include clientbundle.js in your html file.
clientcode.js should be the client's "main" script, comparable to the "app.js" (or similar) of an Express app or so. It can be as big as you want, but you could just as well use it only as bootstrap code to run functions defined in other CommonJS modules.
Note that you can easily mix browserified dependencies with regular dependencies. Any scripts that you include beforehand (say a non-browserified jquery) will just become a global, and browserify does not prevent you from accessing globals.
Beware though: Some packages distributed via npm based on client-side libraries do not conform (entirely) to CommonJS spec. Some may not export anything, some may (unexpectedly) create globals, etc.
See also Backbone app with CommonJS and Browserify .
Some alternatives to browserify:
https://github.com/michaelficarra/commonjs-everywhere
https://github.com/medikoo/modules-webmake
https://github.com/webpack/webpack
I haven't tried them though.
While the idea of using npm for both backend and frontend may sound tempting–it certainly did to me–try Bower or Ender.js instead for frontend dependencies. I personally prefer bower, because I can more easily include it into my requireJS module structure. It will keep you from foaming at the mouth with frustration.
Front-end dependency I would recommend using Bower. There are many components available for you to use and they are really easy to setup.
I'm using Play Framework 2.1, its a web app with jquery bootstrap underscore backbone app,
can I use Node.js to run the r.js optimizer?
Yep. Add this to your project settings:
requireNativePath := Some("r.js"),
requireJsShim += "shim.js"
Then create the shim.js file with your require js configuration settings:
app/assets/javascripts/shim.coffee
Example optimization could be something along the lines of uglify, uglify2, closure, and closure.keepLines.
require.config
optimize: "uglify2"
Use this as a reference: https://github.com/jrburke/r.js and https://github.com/jrburke/r.js/blob/master/build/example.build.js.
You can either install requirejs globally or locally through node. Assuming it's global the native path above should be fine. If it's installed locally you can add the local bin path to your user $PATH and it should work. Either way the optimization should run through node. This should speed up js compilation times of your build tremendously.