Rails ES6 based replacement for webpacker

rubyonrails-talk
7

Hey. Sprockets is great at making assets (JavaScript, CSS) available in a digested form from a common load path that can be accessed via gems. We never did solve that problem with Webpacker. So that’s staying. But I’d love to see a Sprockets Lite that essentially dumps all the JS compilation/source map/whatever stuff.

You can pin dependencies in the importmap to a specific version. If you load the floating skypack link (https://cdn.skypack.dev/md5), you’ll see:

/*
 * Skypack CDN - md5@2.3.0
 *
 * Learn more:
 *   📙 Package Documentation: https://www.skypack.dev/view/md5
 *   📘 Skypack Documentation: https://www.skypack.dev/docs
 *
 * Pinned URL: (Optimized for Production)
 *   ▶️ Normal: https://cdn.skypack.dev/pin/md5@v2.3.0-6tdhvfuY5owWhVhDHCz2/mode=imports/optimized/md5.js
 *   ⏩ Minified: https://cdn.skypack.dev/pin/md5@v2.3.0-6tdhvfuY5owWhVhDHCz2/mode=imports,min/optimized/md5.js
 *
 */

// Browser-Optimized Imports (Don't directly import the URLs below in your application!)
export * from '/-/md5@v2.3.0-6tdhvfuY5owWhVhDHCz2/dist=es2020,mode=imports/optimized/md5.js';
export {default} from '/-/md5@v2.3.0-6tdhvfuY5owWhVhDHCz2/dist=es2020,mode=imports/optimized/md5.js';

As you can see, those pinned URLs are tied to a specific version and intended for production.

I’d love to see a method that downloads the pinned dependencies at some point, but it’s not trivial for packages that have nested dependencies, which haven’t been bundled into a single dist file.

The integration here is quite light touch in any case. It’s just a set of default gems. So is --webpack. So someone can very easily add a vite setup that works the same way.

But for starting out a new Rails skeleton, I’m keen that we don’t install 2,000 node_modules files and the rest of the node infrastructure into the app for those who can avoid it.

7 Likes