rake_source_maps_fixer

RakeSourceMapsFixer

RakeSourceMapsFixer is a set of Rake tasks for fixing sourceMappingURLs. It is helpful for Rails apps where the main front-end code lives in the separate directory like frontend. But the app also uses Sprockets to process outputted bundles and additional assets inside app/assets directory. bin/rails assets:precompile command compiles assets to public/assets directory. Fingerprints are added to asset filenames during compilation by default. It is useful in conjunction with far-future headers.

Problem

When webpack produces bundles to app/assets/bundles, each contains sourceMappingURL at the bottom (if configured). This URL links to the corresponding source map. But when Sprockets compile assets to public/assets, fingerprints are added to all asset filenames. sourceMappingURLs are intact, which makes them point to invalid files without fingerprints.

Solution

RakeSourceMapsFixer fixes sourceMappingURLs inside bundles.

🎮 Usage

Instead of running

$ bin/rails assets:precompile

run

$ bin/rails assets:prepare

📥 Installation

Add source_maps_fixer to your application's Gemfile:

gem 'rake_source_maps_fixer'

And then execute:

$ bundle

Or install it yourself as:

$ gem install rake_source_maps_fixer

📈 Changelog

Major releases 🎙

0.2 (2022-02-11)

💥 breaking changes

• source_maps_fixer works with Rails 7 and Ruby 3.1.
• it drops support for Ruby 2.6
• it supports sprockets-rails ~> 3.3.0. Version 3.4.0 works differently. bin/rails assets:precompile correctly replaces sourceMappingURLs for JS files but adds unnecessary comments

📜 License

The gem is available as open source under the terms of the MIT License.

👨‍🏭 Author

Zbigniew Humeniuk from Art of Code

👀 See also

If you want to make your life easier in other areas of web app development, I strongly recommend you to take a look at my other project called the Loco framework 🙂. It is pretty powerful and makes a front-end <-> back-end communication a breeze (among other things).