X

Geertjan's Blog

  • June 17, 2016

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

Geertjan Wielenga
Product Manager

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';
import { sendApology } 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 three imports above, the first of which is for 'authenticator.js', which is below...

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

...and here's the above in NetBeans...

...and the other two are for 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:

Be the first to comment

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