This card was replaced by Frontend build pipelines in Rails
Rails ships with two separate build pipelines: Sprockets ("asset pipeline") and Webpacker.
Webpacker has many more moving parts, but allows us to use ES6 modules and npm packages (through Yarn). Webpacker is a wrapper around a JavaScript project called webpack Show archive.org snapshot .
Yarn is the package manager we use for JavaScript. It does for JavaScript roughly what Bundler does for Ruby.
Read the first couple of sections of its official documentation Show archive.org snapshot .
You should learn how to:
npm is another package manager. We use Yarn, because Webpacker uses Yarn, but npm works very similarly, and Yarn tries to be as compatible to npm as possible. Yarn can install packages from npm's registry.
webpack
, for example.One big advantage of Webpacker is that is allows us to use the ES6 module system.
export
and import
here
Show archive.org snapshot
.window
With Webpacker, you can
import
your own modules using relative paths, e.g.
import myService from '../services/my_service'`
import
modules directly from npm packages, e.g.
import $ from 'jquery'
import isEqual from 'lodash/isequal'
Babel is a transpiler for modern JavaScript. It enables us to use all the shiny new ES6 syntax even on Browser that do not quite support it, yet.
Have a short look at Babel's homepage Show archive.org snapshot . Try to get a very rough understanding what it does.
For us, Babel is set up can configured by Webpack(er). It just works, you don't usually have to configure it.
webpack Show archive.org snapshot is the asset bundler itself. It has extensive documentation Show archive.org snapshot , but things work a bit differently for Webpacker, so you might not want to look at it too much. Instead, read and understand our own primer on Webpack(er).
After reading, you should know
There is one significant difference between JavaScript package managers and Bundler: In Ruby, only one specific version of a gem can be active at any one time. With Yarn or npm, if multiple packages depend on different versions of other secondary packages, they can receive different versions of those secondary packages at the same time.
You can read a little bit about it here Show archive.org snapshot .
Can you imagine
export
ES6 modules. Any code that uses these functions and classes should import
the newly created modules. Your code should no longer define anything on window
.