Menu
I'm pretty excited about using ECMAScript 6 features now via Babeljs - in particular, I'd love to start making my JavaScript code more modular using the new modules feature.
Here's what I've written so far:
// ECMAScript 6 code - lib.js export const sqrt = Math.sqrt; export function square (x) { return x * x; } export function diag (x, y) { return sqrt(square(x) + square(y)); } // ECMAScript 6 code - main.js import { square, diag } from 'lib'; console.log(square(11)); console.log(diag(4, 3)); I understand that I can transpile this code from ES6 to ES5 via babel on the command line:
babel lib.js > lib6to5.js babel main.js > main6to5.js But what do I need to do to use this code within my HTML?
For example, what would this index.html file look like:
<!-- index.html --> <!doctype html> <html> <head> <meta charset="utf-8"> <title>ECMAScript 6</title> <!-- What goes here? How do I include main6to5.js and lib6to5.js to make this work in the browser? --> <script src="?????"></script> </head> <body> </body> </html> Thank you
969
Simply add type="module" to your script tags and the browser will load them as ES Modules. The browser will follow all import paths, downloading and executing each module only once.
Well, it's been a while and now all major browsers support ES Modules. So I'd like to show you the super simple start to ES Modules! Notice the type="module" attribute there. That's all we need to do to inform the browser that the JavaScript code is a "module" rather than a "script".
You can enable experimental ECMAScript features in your browser by going to chrome://flags/#enable-javascript-harmony and enabling the JavaScript Harmony flag. For some features, you may have to use Chrome Canary with the JavaScript Harmony flag enabled.
To be able to load an ES module, we need to set “type”: “module” in this file or, as an alternative, we can use the . mjs file extension as against the usual . js file extension. Also, from Node version 12.7.
Without using Modules: If you are not using modules (imports/exports), then you can simply transpile your code into ES5 and include those ES5 files in your html. Example:
// ES6 - index.js // arrow function var result = [1, 2, 3].map(n => n * 2); console.log(result); // enhanced object literal var project = "helloWorld"; var obj = { // Shorthand for ‘project: project’ project, // Methods printProject() { console.log(this.project); }, [ "prop_" + (() => 42)() ]: 42 }; console.log(obj.printProject()); console.log(obj); Transpile to es5: babel index.js > es5.js
In index.html, include <script src="es5.js"></script> Will print out the following in console:
[2,4,6] helloWorld {"project":"helloWorld","prop_42":42} Using Modules: Now if you are using modules (which is your case with lib.js and main.js), after converting your code into ES5 you also have to bundle them (from AMD/CommonJS/Modules to code that your browser can understand). You can do this with various build systems like gulp, webpack, browserify, etc. I'm going to use browserify as an example here.
Say my folder structure looks like this:
es6 |- src |- lib.js |- main.js |- compiled |- index.html I run babel to transpile my files /src to /compiled folder: babel src --out-dir compiled.
Now I have my ES5 code in the compiled folder. I install browserify in the cmd line and then bundle my main.js (entry point) in my compiled folder
~/es6 » npm install --global browserify ~/es6 » browserify ./compiled/main.js -o ./bundle.js Now I have bundle.js which is look like this:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict"; exports.square = square; exports.diag = diag; var sqrt = exports.sqrt = Math.sqrt; function square(x) { return x * x; } function diag(x, y) { return sqrt(square(x) + square(y)); } Object.defineProperty(exports, "__esModule", { value: true }); },{}],2:[function(require,module,exports){ "use strict"; var _lib = require("./lib"); var square = _lib.square; var diag = _lib.diag; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 },{"./lib":1}]},{},[2]); Then in your index.html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ECMAScript 6</title> <script src="./bundle.js"></script> </head> <body> </body> </html> Then simply open up your index.html, and your console should give you the following:
121 bundle.js:27 5 bundle.js:28 If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
