artofcodelabs / source_maps_fixer

Rake tasks that fix sourceMappingURLs in JavaScript and CSS bundles generated by module bundlers like webpack

Repository from Github https://github.comartofcodelabs/source_maps_fixerRepository from Github https://github.comartofcodelabs/source_maps_fixer

SourceMapsFixer

SourceMapsFixer 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

SourceMapsFixer 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 'source_maps_fixer'

And then execute:

$ bundle

Or install it yourself as:

$ gem install 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).

About

Rake tasks that fix sourceMappingURLs in JavaScript and CSS bundles generated by module bundlers like webpack

License:MIT License


Languages

Language:Ruby 99.9%Language:JavaScript 0.1%