How do I build my RactiveJS-based library into one JS file?

Question

(Related question: what's the difference between rv.js and r.js?)

I've got a series of RactiveJS-based components, each in their own module. I use the rv.js loader (linked above) mentioned on the Ractive site. I love it, but what I want to do is use that (or something similar) to build to one JS file that will work even in non-AMD/RequireJS apps. I've looked at Almond, but it seems to want to use r.js (rather than rv.js), and I'm not sure what the difference is or what changes I'd need to make.

Bonus points: is there a way to run all of this in Gulp? I'm one of those people who cringes when he has to use the command line, so please talk slowly and forgive my ignorance:)

Answer 1

A bit late to answer, apologies for that.

• rv.js is a RequireJS plugin that loads ractive components as if they are javascript modules
• r.js is the RequireJS optimizer, used to bundle together all files and minify (exactly your use-case)

RequireJS is quite large in size, and you don't want it bundled with your application js during a build.

Enter almond.js. It mimics the module resolution of RequireJS, but doesn't have the code to handle actual loading of the files over the network. The result is a smaller file size.

So, your workflow would be:

• You use RequireJS during development
• Use rv.js, as you are already, to load ractive components
• When it's time to build, you use r.js to build
• And ensure almond.js replaces RequireJS in the final built js file

Now, I use grunt, and there is a plugin for that: grunt-contrib-requirejs

For gulp, I suggest gulp-requirejs-optimize
It has options to replace requirejs with almond during the build process if you look at the documentation on that page.

Hope that helps.