I’m (sort of) used to Webpack so I cobbled together an “asset pipeline free” hotwire project with Tailwind, a few npms, etc. And while it works, its slow during dev and sort of a pain to use. I saw this thread here today and learned about Skypack for the first time, and saw othesr were using it for asset pipeline projects.
Has anyone written a walkthrough or put up a sample repo for a baseline hotwire + asset pipeline + skypack? I really benefit by seeing an example where someone has set it up “the right way.”
And not to start a holy war or anything, but what are the pros / cons of doing a project this way vs. the webpack method? I did see DHH’s tweet about native ES6 and I agree, but am I missing anything?
Yeah it’s a bit rough at the moment. I think, at this stage, it’s an experiment.
The desire, which I share, is that you shouldn’t need a build pipeline to build most Hotwire apps. Your browser can run your Javascript, you don’t need a transpiler. And thanks to HTTP/2, we don’t really need a Javascript bundle anymore, since there’s no penalty to downloading various different files off the same domain. It’s a new world. And in it, what’s the point of webpack? It doesn’t do anything for you (unless you are using React or something that absolutely needs transpilation).
There’s absolutely no shame in using webpack — especially at the moment. We’ll need more tooling to go fully webpack free, probably. Copying and pasting code into app/assets/javascripts/libraries works, but it doesn’t have the pizazz of yarn add whatever.
We’ll get there. And if you have ideas, or a desire to help implement some of this stuff, please do say!
Oh sure, I completely agree. I was mainly just wanting to see how someone else had done it so that I can follow along and make sure I’m seeing the whole picture.
The biggest issue with getting the Webpack side of things working with all of this new kit is that the instructions aren’t exactly clear, and there are a bunch of caveats or complications if you don’t do things in exactly the same way. I figured it out, but it was painful.
I’m going to start experimenting with the webpackless approach this weekend, so I can better understand it and how the parts fit together. But yes, I’d love to help make this easier. And perhaps if there isn’t already a guide, I’ll try to write one up as I figure stuff out.
@DaveSanders I’d be very excited to read that! I was hoping to be able to “download ESM from skypack” as DHH mentioned elsewhere.
For now I only needed a single Stimulus controller so I copied the source file from Github instead of using the skypack module as I couldn’t figure it out. When I look at the JS they serve on their CDN it’s just doing more and more imports.
On top of that I already found out that I needed to switch from uglifier to terser, but lots of stimulus controllers have export default class extends Xyz which trips up terser for now. So even if I could download the module, if it still goes through terser I’d have to fix at least that.
Hope it help, but looking very much forward to a webpack free future (for some use cases at least)
Your reasons for not using the skypack CDN were just because you were running your own, so you didn’t want a separate server dependency?
So with it locally, I assume its being imported into your main Application.js right? So its making a larger file size? Or are you loading it separately to get a multi-plexing benefit?
Not sure what I’m doing wrong. No matter if I try downloading or hotlinking skypack, I keep getting
Failed to autoload controller: content-loader Error: Unable to resolve specifier 'content_loader_controller' from http://localhost:3000/assets/stimulus/loaders/autoloader-049…957166e3d004afc916a4c399f9e164045c348d56d6fb01db375ef8acf.js
throwUnresolved http://localhost:3000/assets/stimulus/libraries/es-module-shims-108c9f5a06bb8dcc1fd6ffac571d699e3bf8d76ba3f09e205a96b98063d61441.js:472
resolve http://localhost:3000/assets/stimulus/libraries/es-module-shims-108c9f5a06bb8dcc1fd6ffac571d699e3bf8d76ba3f09e205a96b98063d61441.js:468
importShim$1 http://localhost:3000/assets/stimulus/libraries/es-module-shims-108c9f5a06bb8dcc1fd6ffac571d699e3bf8d76ba3f09e205a96b98063d61441.js:267
loadController http://localhost:3000/assets/stimulus/loaders/autoloader-049dda1957166e3d004afc916a4c399f9e164045c348d56d6fb01db375ef8acf.js:20
autoloadControllersWithin http://localhost:3000/assets/stimulus/loaders/autoloader-049dda1957166e3d004afc916a4c399f9e164045c348d56d6fb01db375ef8acf.js:8
<anonymous> http://localhost:3000/assets/stimulus/loaders/autoloader-049dda1957166e3d004afc916a4c399f9e164045c348d56d6fb01db375ef8acf.js:52
autoloader-049dda1957166e3d004afc916a4c399f9e164045c348d56d6fb01db375ef8acf.js:22:29
I have the following in my app/assets/javascripts/controllers/index.js:
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
import ContentLoader from 'https://cdn.skypack.dev/stimulus-content-loader'
application.register("content-loader", ContentLoader)
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))
I’d prefer downloading the asset and serving it from my domain (via CDN) - a few extra steps until we have package management for ESM but at least I know it won’t break or suffer from latency to skypack