How do you build, bundle & minify ES6-modules?

Question

Due the fact, that ES6-modules (JavaScript-modules) are available for testing:

• https://www.chromestatus.com/feature/5365692190687232
• https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

I wonder, how should I minify and prepare the project release-file? Earlier, I havde bundled all JavaScript-files into the single and minified file, except situations, where I have to load the JS-file dynamically via XHR or Fetch API.

As I understand, it's rather impossible to prepare a single-minified file with the ES6-modules right now or may be, I'm just misunderstanding some ways of work.

So, are the any ways to prepare my ES6-modules into single file and how I should prepare the modern JavaScript-project in 2017 year, where JavaScript-modules will be available?

Answer 1

I wonder, how should I minify and prepare the project release-file?

That is purpose of this action? Okay, minified files take fewer network traffic, and will be downloaded faster, but most NPM libraries provides minified dist-files already. And main question about bundling in one big file.

Why webpack do it? Of cource, due absence of support for ES-modules in browser by native, What's why webpack resolves import statements and round dependencies in synchronous manner*, and then substitute it to IIFE for scoping. And perform babel translation and polyfilling, yes.

But then native support of ES-modules is started, it's become un-useful. One of main goals when exposing your web-app to production, is minify traffic volume for your server, using CDN. Now you can do it in native way, so just import ES-modules from unpkg.org and be happy

*If not using HMR, of course, But it's not appropriate for production mode.

Live examples here: https://jakearchibald.com/2017/es-modules-in-browsers/

Answer 2

This blog explains how you would use the ES6 module syntax and yet still bundle your code into something that the browser will understand.

The blog explains that using SystemJs as an ES6 module polyfill and Babel along with Gulp will enable you to code you modules in ES6 yet sill be able to use it today.

https://www.barbarianmeetscoding.com/blog/2016/02/21/start-using-es6-es2015-in-your-project-with-babel-and-gulp/

Using this guide will help you write your code in ES6 while still having a normal workflow to building, minifying and bundling your code.

Keep in mind there are a lot of tools out there that will help you achieve this but I've followed this method many times and I can vouch for its validity.