Jekyll::Esm

This plugin will allow you to define esm module definitions directly in your markup that point to local node_modules, then jekyll will handle installing and removing them automatically so that you can use local modules rather than cdn hosted ones.

Why?

Looks like some of the major frameworks are moving away from asset bundlers as es6 is now able to do most of it internally, which is great. Now you can simply declare your esm definitions in the markup of your templates and with this plugin Jekyll will manage the installation behind the scenes with yarn by default, but you can additionally specify npm or bower as the package manager.

Installation

Add this line to your application's Gemfile:

gem 'jekyll-esm'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install jekyll-esm

And add the following to your site's _config.yml

plugins:
  - jekyll-esm

Select a package manager

jekyll-esm uses yarn by default but if you prefer npm or bower, its:

# _config.yml

esm:
  manager: npm|bower

Destination folder

Additionally you can rename the destination folder for production, so where by default it would output to _site/node_packages or _site/bower_components, if you set the dist:

A NOTE ON NPM if you don't have a package.json file in your root, npm will actually search in the parent folder for a package.json.

# _config.yml

esm:
  dist: dist

Then all your managed packages will be available at _site/dist.

Ignore package.json!

Currently You MUST exclude package.json in the _config.yml otherwise jekyll will go into a loop. Sucks a bit but will try and improve that.

exclude:
  - package.json

Optimizing

Strict mode

You can run in strict mode to increase logging verbosity from the js package manager.

# _config.yml

esm:
  strict: true

data-esm-id attribute

You can set this on a declaration to prevent Jekyll from processing it more than once (eg, if you have lots of compiled pages, with the same layout, you don't want to run it more than once per importmap declaration):-

    <script data-esm-id='1' type="importmap">
      {
        "imports": {
          "/src/index.js": "/src/index.js"
        }
      }
    </script>

If you have multiple importmap declarations with different values, set a different id for each one, or no id at all, but no id is less speed efficient, as jekyll will process them each time for every page.

Example _config.yml

You can have a look at the possible configuration options in the fixtures config file at spec/fixtures/_config.yml in this repo.

Development

After checking out the repo, run bin/setup to install dependencies. Then cd spec/fixtures && yarn to install required JS dependencies for specs. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/tevio/jekyll-esm. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

License

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

Code of Conduct

Everyone interacting in the Jekyll::Esm project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.