Js::Packer::Rails

The Packer allows you to easily include JavaScript bundle into your Rails project. JavaScript world offers a lot of great tools for bundling, uglifying, minifying... So, use it in your Rails app! It could be Webpack or Grunt or Gulp or Any New Awesome JS tool :) I believe the choice of the tools should depend on issues you want to solve, so use JS tool to prepare your source JS code.

The Packer:

• don't care how do you bundle your JavaScript
• don't use Rails assets pipeline
• is only for Rails framework
• require JavaScript manifest file
• add 3 helper methods to your view: js_bundle_tag(*sources) js_bundle_hash(source) js_bundle_name(source)

Installation

Add this line to your application's Gemfile:

gem 'js-packer-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install js-packer-rails

Usage

JavaScript manifest file

Example format of manifest:

/* admin-bundle.json */
{
  "admin-bundle.js": "admin-bundle-f65a6b9fb09ba93b7ea6.js"
}

So if your bundle name is: bundle-example-name then you have to generate manifest json: bundle-example-name.json which maps your bundle name into bundle name with hash:

{
  "bundle-example-name.js": "bundle-example-name-[bundle hash].js"
}

Rails view

js_bundle_tag

Just use js_bundle_tag in your view or layout by passing your bundle name:

<%= js_bundle_tag 'admin-bundle' %>

If you would like to include more then one bundle for view or layout just add more bundle names:

<%= js_bundle_tag 'admin-bundle', 'user-bundle' %>

js_bundle_hash

Helper js_bundle_hash would be useful to get your code version for your source maps:

<%= js_bundle_hash 'admin-bundle' %>

js_bundle_name

Helper js_bundle_name return your bundle name with proper hash taken from manifest:

<%= js_bundle_name 'admin-bundle' %>

Bundle JavaScript

Packer would be looking for JavaScript manifest and bundle by default in directory public/bundles/javascripts/.

Configuration

You can change default directory of your manifest and bundle via YAML file: config/packer.yml

You can define paths by two params: manifest_path and bundle_path. Manifest and bundle should be in public directory. manifest_path should contain path starting from public/ but bundle_path should skip public/

Example:

default: &default
  manifest_path: public/js/bundles
  bundle_path: js/bundles

development:
  <<: *default
test:
  <<: *default
production:
  <<: *default

Example Webpack setup

Use webpack plugin webpack-manifest-plugin

const path = require('path')
const ManifestPlugin = require('webpack-manifest-plugin')

module.exports = {
  entry: {
    'admin-bundle': path.resolve(__dirname, 'src', 'index.js'),
  },
  output: {
    filename: 'admin-bundle-[hash].js',
    sourceMapFilename: 'admin-bundle-[hash].js.map',
    path: path.resolve('../../public/bundles/javascripts/'),
  },
  plugins: [
    new ManifestPlugin({
      fileName: 'admin-bundle.json',
    }),
  ],
}

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/jcieslar/js-packer-rails.

License

The gem is available as open source under the terms of the MIT License.