ECMAScript 6, Modules, Babel, Webpack, and NetBeans IDE

Datetime:2016-08-23 00:28:31          Topic: Webpack           Share

I've been talking about modularity via Require.js in enterprise JavaScript applications for some time (because Oracle JET bundles Require.js as its modularity solution). ECMAScript 6 provides its own built-in module system and, since NetBeans IDE now provides ECMAScript 6 support (in development builds), let's rewrite my Require.js application to use ECMAScript 6 modularity.

The complete sample discussed below is here:

https://github.com/GeertjanWielenga/RequireJSSamples/tree/master/ECMAScript6Sales

Handily, you can compare the ECMAScript 6 sample above to the Require.js implementation:

https://github.com/GeertjanWielenga/RequireJSSamples/tree/master/ModularSales

...as well as the non-modular Sales application:

https://github.com/GeertjanWielenga/RequireJSSamples/tree/master/SimpleSales

Here's 'main.js':

import { buyThing } from './buyer';
name = 'John Smith';
console.log(name + " enters the system");
var result = buyThing(name);
console.log("sale success " + result);

In NetBeans, the above looks as follows:

Take note that there's the "import" keyword above, enabling me to import "buyThing" from 'buyer.js', since here there's an "export" keyword:

import { verifyName } from './authenticator';
import { sendThing } from './thing';
export function buyThing(name) {
    console.log(name + " is trying to buy");
    var verified = verifyName(name);
    if(verified){
        sendThing(name);
    } else {
        sendApology(name);
    }
    return verified;
}

In NetBeans, the above looks as follows:

Notice that there are two imports above, for 'authenticator.js', which is below:

export function verifyName(name) {
    var requiredNameLength = 1;
    console.log("authenticating " + name);
    return name.length > requiredNameLength;
}

Here's the above in NetBeans:

...and also for 'thing.js':

export function sendThing(name){
    console.log("send thing to " + name);
}
export function sendApology(name){
    console.log("say sorry to " + name);
}

Here's the above in NetBeans:

In my 'package.json', I'm using Babel and Webpack:

"scripts": {
    "babel": "babel public_html/js/src --presets babel-preset-es2015 --out-dir public_html/js",
    "webpack": "webpack public_html/js/main.js public_html/js/bundle.js"
},
"devDependencies": {
  "babel-cli": "^6.10.1",
  "babel-preset-es2015": "^6.9.0",
  "webpack": "^1.8.5"
}

You'll now have this:

You can run "npm install" directly in NetBeans:

You can run Babel and Webpack directly in NetBeans:

When I run Babel, the JavaScript files are transpiled to ECMAScript 5, since that's what browsers support right now. When Webpack is used, the entire application is bundled into "bundle.js", which avoids problems with the "require" keyword that you get from Babel transpilation.

Now, I refer to that one single file, i.e., "bundle.js", that you see above, in my "index.html" file.

Related reading:





About List