985 Modern build pipelines with Webpack [3d]

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

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:

• Install and update packages
• Remove packages

npm

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.

• Try the package search on npm's homepage Show archive.org snapshot . Search for webpack, for example.

ES modules

One big advantage of Webpacker is that is allows us to use the ES6 module system.

• Learn about export and import here Show archive.org snapshot .
• Understand how this replaces global properties on window

With Webpacker, you can

• import your own modules using relative paths, e.g.

  Copyimport myService from '../services/my_service'`
  

• import modules directly from npm packages, e.g.

  Copyimport $ from 'jquery'
  import isEqual from 'lodash/isequal'
  

Babel

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

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

• what "packs" are and how to configure them
• how to add JavaScript code
• how to add Stylesheets
• how to add images
• how to use the Webpack dev server

One more thing about Yarn / npm

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

• why this is possible in ES6, but not in Ruby?
• when this is useful?
• why this can also be problematic?

Exercise

• Migrate MovieDB's asset management from Sprockets to Webpacker. Perhaps this migration guide might help you.
• Your Sass files can remain (mostly) unchanged, but they need to be compiled by Webpack now
• After migrating JavaScript files, change all your global JavaScript functions and classes so they 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.