Awesome

sprockets-illusionist

sprockets-illusionist makes it possible to transpile your ES6 files into ES5 using the Illusionist node module and Sprockets.

This entire guide assumes that you have node and npm already installed on your local machine.

Deprecation notice

:warning: This repository is now deprecated in favor of sprockets-es6.

Installation

First, you will need the Illusionist node package:

$ npm install -g illusionist

Add this line to your application’s Gemfile:

gem 'sprockets-illusionist'

And then execute:

$ bundle

Usage

Options

module_type

The module type you want to use.

Available options: amd, cjs and globals

Default: amd
base_path (only applies to AMD modules)

The base_path setting is used to name modules. Module names are relative paths to base_path, if you don’t set it, only the file name is used.
node_path

The path to the node executable.
illusionist_path

The path to the illusionist executable.

Integrating with Rails

Create an initializer:

# sprockets_illusionist.rb
SprocketsIllusionist::Config.configure do |config|
  config.base_path = Rails.root.join('app', 'assets', 'javascripts')

  # You can also choose which module format you want.
  # 'amd' is the default, other options are: 'cjs' and 'globals'
  config.module_type = 'amd'
end

With this configuration, a file named:

/projects/MyApp/app/assets/javascripts/controllers/foo_controller.js.es6

will yield a module named:

controllers/foo_controller

Writing ES6 files

With sprockets-illusionist just write your JavaScript files with the extension .js.es6 and everything will be transpiled for you.

Deploying on Heroku

You will need to use heroku-buildpack-multi to install node and Ruby.

Tell Heroku to use the right buildpack:

$ heroku config:add BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-multi.git

Create a .buildpacks file with the following content:

https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/heroku/heroku-buildpack-ruby.git

You will need to include illusionist as a dependency of your project.

Create a package.json file with the following content:
```
{
  "name": "Your-Project",
  "version": "0.0.1",
  "dependencies": {
    "illusionist": "~<insert latest version>"
  }
}
```
Install the dependencies on your local machine for development:
```
$ npm install
```
Note that heroku-buildpack-nodejs does that for you at deploy time.

You will need to link to the local installation of illusionist and node to get the latest version.

Your initializer should look like this:

SprocketsIllusionist::Config.configure do |config|
  config.node_path = ENV['NODE_BIN_PATH']
  config.illusionist_path = ENV['ILLUSIONIST_BIN_PATH']
  config.base_path = Rails.root.join('app', 'assets', 'javascripts')
  config.module_type = 'amd'
end

Then in .env on your local machine:

NODE_BIN_PATH=node
ILLUSIONIST_BIN_PATH=./node_modules/.bin/illusionist

Finally, set these environment variables on Heroku:

$ heroku config:set NODE_BIN_PATH=./.heroku/node/bin/node
$ heroku config:set ILLUSIONIST_BIN_PATH=./node_modules/.bin/illusionist

Contributors

License

About Mirego

Mirego is a team of passionate people who believe that work is a place where you can innovate and have fun. We’re a team of talented people who imagine and build beautiful Web and mobile applications. We come together to share ideas and change the world.

We also love open-source software and we try to give back to the community as much as we can.