I wrote this to help a new dev at Fire Hazard get up to speed, but it might be useful for anyone looking to add advanced js to a rails application. This is one potential implementation of the stack - there are plenty of other ways to to it.
We want to use lots of external libraries (which themselves have dependencies).
We want to compress the js before it goes down the wire, and use cache-busting to ensure we have the latest version.
Here's how we go from frontend/*.js in the repo to a running js app on the client:
* deploy * before_assets_precompile * yarn install * package.json * yarn run * package.json * cross-env * browserify * envify * babelify * .babelrc * assets:precompile * web request * ...
task :before_assets_precompile do
system('yarn install && yarn run build_players')
yarn will create yarn.lock, the equivalent of Gemfile.lock. This means we can safely specify versions as "^1.2.3" (meaning "compatible with 1.2.3") - we'll only get new versions if we do 'yarn upgrade', rather than 'yarn install'.
This translates calls like
import VueRouter from 'vue-router'
into something the browser can execute, since 'import' isn't implemented by browsers.
It also does a couple of additional transformations:
This could be optimised away, or nearly away, since browserify has already done most of this work.
Once everything's built, the actual request is very simple: