Geertjan's Blog

  • June 18, 2016

Structuring ECMAScript 6 Modules via Babel and Webpack

Geertjan Wielenga
Product Manager

Continuing from yesterday, since transpilation of ECMAScript 6 to ECMAScript 5 is needed because of the current state of browsers, and we've chosen Babel for that, and since we're using Webpack to bundle our generated ECMAScript 5 files... what would be a logical way to structure our source code so that you can easily find the code with which you need to work?

Let me suggest the following entries in package.json:

"scripts": {
"babel": "babel public_html/js/src --presets babel-preset-es2015 --out-dir public_html/js/gen",
"webpack": "webpack public_html/js/gen/main.js public_html/js/bundle.js"

What the above gives you is this:

In the "gen" folder is the output of Babel. And 'bundle.js', in the root of the "js" folder, is the result of Webpack's bundling process. They're green above because I haven't (and won't) commit them into my repo, they're simply generated whenever I need them to be. And that's a clear structure and let's me easily see what's what.

Does anyone have other/different/complementary/conflicting ideas about this structure? 

Join the discussion

Comments ( 2 )
  • guest Sunday, June 19, 2016

    Nice job Geerjan, Babel opens up so many possibilities for Javascript today!

    You may consider to investigate the integration between Webpack and Babel so you can delegate the whole bundling + transpilation task to one single tool. That way you can enjoy features like hot module reloading, assets management and pre/post css transpilers as well.

    My personal take on the argument is that we (engineers) need a tool that takes care of the whole project being inclusive of all the different tools and technologies involved.

    And a deep integration with an IDE would be a big perks of such setup :-)

  • Juan Carlos Guzman Comesaña Tuesday, June 21, 2016

    Maser excellente work please in this version a suggest dedicate support for IDE in python 3.5

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.