Florian Munz, Co-Founder at Depfu

If you’ve followed the recent Rails releases you’ll probably not have missed the push towards no-bundling and import maps as the preferred way to bring in external JavaScript libraries.

Import maps let you import JavaScript modules using logical names that map to versioned/digested files – directly from the browser. The README has a good overview if you’re not familiar with how it works.

Import maps are a general concept, but Rails added a gem to make them work nicely with the new asset pipeline, which is what we’re supporting now in Depfu.

Compared to pnpm and other package managers we actually didn’t get that many requests for import maps. But since we initially built Depfu for the Rails ecosystem, we felt a responsibility to support all the possible ways to bring in JavaScript.

How it works

Importmap-rails is not a real package manager, nor does it pretend to be. It’s more like a pragmatic next step after realizing that putting all libraries as script tags into your application layout is maybe not that great of an idea.

You get a config file called config/importmap.rb that lists all the npm packages you are using. You can reference them as local, vendored files or more commonly as URLs pointing to CDNs that specialize in providing JS dependencies for import maps, like JSPM.org and jsDelivr.

# Pin npm packages by running ./bin/importmap

# referencing a CDN
pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js"
pin "object-assign", to: "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"

# or referencing vendored files
pin "react" # @17.0.2
pin "object-assign" # @4.1.1

In both cases it also includes a version, which is where Depfu comes in: Since there is always a npm package behind every import map URL, we can hook into our existing npm support. Depfu will send you PRs for every new version, either as an individual update or as a grouped update bundling several dependencies together. And of course our patented* reasonable up-to-date strategy is also supported.

* not really

A few caveats

Since the import map support in Rails is not a full blown package manager there are a few caveats you should be aware of:

  • The biggest one is that importmap-rails doesn’t differentiate between direct and indirect dependencies. It knows when to bring in subdependencies of the direct dependency you are adding, but it’s simply adding them to your importmap.rb file. So when you’re later trying to update that subdependency you don’t know which parent dependency it relates to. Similarly, when you’re removing a direct dependency you don’t know which subdependencies you can remove at the same time. And it gets even messier when multiple dependencies rely on the same indirect dependency.

  • There are no version specs, only pinned versions (so no twiddle wakka or caret operator). This is not a problem for Depfu per se, but means you can’t indicate to us that you don’t want to update to the next major React version just yet, but minor and patch versions would be welcomed.

Give it a try

We didn’t automatically enable this for existing repos, so please find the “+ Add” button in the repo dashboard in Depfu and it will allow you to activate it yourself.

We have a few ideas to improve upon these limitations, but for this first release we’re behaving exactly like importmap-rails and we’ll see what the biggest pain points are. Please give it a try and let us know any problems or ideas you have!