Using Ractive with Browserify

edit this page

Browserify is a way of using node-style requires in the browser, bundling your scripts into a single file for efficient deployment.

There are three Browserify transforms available that you can use for Ractive.js:

• Ractivate, a transform that will pre-parse templates. Contributed by jrajav. (Github repository)
• Ractify, a transform that will pre-compile components. Contributed by marcello3d. (Github repository)
• Ractiveify, a transform that will pre-compile components with support for compiling embedded scripts and style tags (with Livescript, CoffeeScript, Sass, etc). Inspired by ractify. Contributed by norcalli. (Github repository)
• Ractive-Componentify, a transform that will pre-compile components and can compile embedded script and style tags from a language of your choice. It also supports link tag imports and sourcemaps that map to the original component source. Inspired by ractiveify. Contributed by blackgate. (Github repository)

A starter project is available for using Ractivate with gulp.js build system.

Using plugins with Ractive and Browserify

Plugins typically include a Universal Module Definition (UMD) block that, in a node.js or Browserify environment, calls require('ractive'). If you want to be explicit about which version of Ractive gets loaded, you can do it when you configure browserify like so:

browserify.require('./my-copy-of-ractive.js', { expose: 'ractive' });