Middleman with sprockets and es6 modules

#1

Hello,

I’m new to middleman and es6.
I want to use es6 with middleman 4. I found on internet the easier way is to use sprockets with the following gems:

gem ‘middleman-sprockets’, ‘~> 4.0.0.rc’
gem ‘sprockets-es6’

After that in config.rb need to add the following lines:

require ‘sprockets/es6’
activate :sprockets do |s|
s.supported_output_extensions << ‘.es6’
end

It was working fine until I tried to convert some javascript files to es6 modules using the export keyword.

The generated javascript code includes the following lines:

Object.defineProperty(exports, ‘__esModule’, {
value: true
});

Browser raises the following error:

Uncaught ReferenceError: exports is not defined

Searching on internet I found that this error could be because babel by default use CommonJS modules that are not supported in browsers.
The solution I found for sprockets is to use almond (https://github.com/requirejs/almond) and configure sprockets to make babel compile modules in AMD module format.
I found how to make this configuration on Rails following this link (http://nandovieira.com/using-es6-with-asset-pipeline-on-ruby-on-rails) where he suggest to use this configuration:

Rails.application.config.assets.configure do |env|
babel = Sprockets::BabelProcessor.new(
‘modules’ => ‘amd’,
‘moduleIds’ => true
)
env.register_transformer ‘application/ecmascript-6’, ‘application/javascript’, babel
end

I don’t know how make this kind of configuration on middleman and I found nothing related on the docs.

Anyone knows how to do this kind of setup?
Do I have another way to use es6 with middleman?

Thanks in advance.

#2

I just came across your post now. If you haven’t figured it out, you can achieve the same configuration like this in Middleman’s config.rb:

::Sprockets::ES6.configure do |config|
  config.marshal_load({
    modules: 'amd',
    moduleIds: true
  })
end

In case you want to know how everything else is configured, check out this example that I put together quickly: https://github.com/vvasabi/middleman-es6-example.

Hope that helps.

#3

It worked! :slight_smile:
Thank you vvasabi!