Structuring ECMAScript 6 Modules via Babel and Webpack

Datetime:2016-08-23 00:28:17         Topic: Webpack  ECMAScript          Share        Original >>
Here to See The Original Article!!!

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?


Put your ads here, just $200 per month.