17

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

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?

jeanfrg
  • 2,366
  • 2
  • 29
  • 40
  • Use a bundler like webpack – Sven van de Scheur Jul 30 '17 at 14:09
  • *Earlier, I have bundled all JavaScript-files into the single and minified file*: why should you not be able to do so with ES2015 modules? – PeterMader Jul 30 '17 at 14:13
  • @SvenvandeScheur Does webpack work natively with the ES6-modules? Or it just translates JS-code into the ES5-scripts with the sourcemaps? If the last option is correct, then it's rather old solution for 2017 year. If web-browser has provided the new way of separating the project using the ES6-modules, why not to find the way how to use modern features in more pleasant way? PS: Also, I have used webpack 1 year ago and to be honest... It's rather ugly designed project (as for me). –  Jul 30 '17 at 14:13
  • 1
    @PeterMader Maybe because, they have different scopes with `import/export` stuff. How would you load module A from module B, if it would a single file? –  Jul 30 '17 at 14:15
  • Webpack allows you to bundle ES6 modules with minimal configuration: E.g. http://ccoenraets.github.io/es6-tutorial/setup-webpack/ – Sven van de Scheur Jul 30 '17 at 14:17
  • You can create scopes in ES5 using closures. That's how module bundlers work. – PeterMader Jul 30 '17 at 14:17
  • @PeterMader Yes, I can. But, there is a very big difference. Native support for import/export keywords and I think, web-browsers DO some specific kind of work with loading such modules in native way. –  Jul 30 '17 at 14:22
  • Please take a look at the links that were posted here. You can believe me that it's possible. – PeterMader Jul 30 '17 at 14:24
  • @PeterMader I have seen, it's NOT a native way. I repeat. I wonder exactly native way without translations into es5-code, sourcemaps and etc... The questions WASN'T about emulation or the ways how to support ES6-modules via sourcemaps or other specific stuff. The question was about the possibility of the minification THE NATIVE modules WITHOUT translations, polyfills and etc... –  Jul 30 '17 at 14:28

2 Answers2

1

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.

jeanfrg
  • 2,366
  • 2
  • 29
  • 40
  • 1
    I know about this. But, as I understand it still references to translating source code into ES5-scripts & the NATIVE modules won't work in such way. It will just use Babel translation/source-maps. It's NOT, which I want. I wonder about NATIVE work of modules, and THE possibility to minify ES6-modules in the way without babel, webpack or other translators... –  Jul 30 '17 at 14:25
  • @Neverlands As you stated yourself ES6 modules are not yet supported so there needs to be some sort of transpilation into ES5 code. – jeanfrg Jul 30 '17 at 14:26
  • But, as you can see it will be supported very soon. And so what? I'm interested exactly the new way of work. I'm not interested in using ways of minification/polyfills via babel, webpack & other relative stuff. Web-browsers provides the new way of work and I'm interested exactly about it, not old ways of preparation, which I'm using already. –  Jul 30 '17 at 14:30
  • I believe an arbitrary collection of ES2015 modules can't be bundled to one single ES2015 module. This is simply not possible due to the semantics of ES2015 modules, i.e. the scoping and resolving of imported identifiers. You can only achieve this if you work with a root or entry module; the result being a module that incorporates the dependencies and only exposing the exported identifiers of the root or entry module. Is there a bundler out there that does exactly do this? Additionally you could also bundle other parts of the dependency tree in one single ES2015 module. – Carl in 't Veld Mar 03 '20 at 19:09
0

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/

Vladislav Ihost
  • 2,127
  • 11
  • 26
  • `But then native support of ES-modules is started, it's become un-useful.`, I'm interested exactly in this line, because this future will be very soon as I see... –  Jul 30 '17 at 14:35
  • @Neverlands Added link with live examples about your question. (Don't forget to upvote if useful) – Vladislav Ihost Jul 30 '17 at 14:44
  • Glad to upvote, but can't due small reputation. When will be the required amount of it, I shall upvote. –  Jul 30 '17 at 14:51
  • Looking at this in 2020, is there a way to minify these files yet? I am trying to do it without npm packages... – jssayin Aug 25 '20 at 21:58