From the various bundler options, it seems that Webpack has emerged as the most popular one. For Rails, Webpack seems to be the way forward as well, and support to use it will be integrated into Rails 5.1.
@travisdmathis @hackteck You'll be happy with Rails 5.1 then! Shipping with Yarn by default and --webpack option 👍— DHH (@dhh) 24 december 2016
This integration is currently being developed as rails/webpacker. The gem includes installers and configuration files that will make it easier to get started with Webpack. It comes with defaults like Babel for es6/7 and a React installer. Setup is fast, and requires little Webpack experience to get started. Rails/webpacker is likely to ship with Rails 5.1, but you can already start using it today.
Let’s start by creating an example app using the latest rails version, at the moment this is 5.0.1
rails new webpacker_test
rails g controller static_pages home
and in our routes
root to: 'static_pages#home'
brew install yarn
We want the latest webpacker gem version from github, so add the following to your gemfile and run bundle install:
gem 'webpacker', github: 'rails/webpacker'
To install webpack, dependencies and to generate configuration files:
This generates the following:
- binstubs for yarn, webpack and webpack watcher
- node_modules, package.json and yarn.lock in /vendor
Let’s run our rails app with
bin/rails server, and in a different terminal window run
Add the file to your application.js pack with
View the source code in the browser to see the bundled Webpack file with the transpiled code.
Rails webpacker comes with a React installer that you can use to install React and its dependencies with a single command.
Add the React pack to your desired layout file and restart
bin/webpack-watcher to start using it.
Adding packages with yarn
To manually install new packages, make sure you use
bin/yarn add new_package. Using bin/yarn will make sure that the right package.json and yarn lockfile in app/vendor are updated.
To compile your js packs for deployment, add the
rails webpacker:compile command to your deployment process. This will setup production configuration, including digests (similar to the asset pipeline).
Understanding es6 by Nicholas Zakas https://leanpub.com/understandinges6/read
Webpack docs https://webpack.github.io/docs/