Tweet
In-browser ECMAScript 6 transpilation with Babel
First: Preparation
Somewhere type:
npm install babel-core es6-module-loader
Copy to JavaScript directory of your webapp: (ie: /js/
)
node_modules/babel-core/browser.js
node_modules/es6-module-loader/dist/es6-module-loader.js
node_modules/es6-module-loader/dist/es6-module-loader.js.map
browser.js
is the ES6 transpiler and es6-module-loader.js
allows you to load ECMAScript 6 files and to use import
in the browser.
Webapp skeleton
Now, youβve got something like that (create these files: index.html
and index.js
and js/models/human.js
)
my-app/
βββ public/
| βββ js/
| | βββ models/
| | | βββ human.js
| | βββ vendors/
| | βββ browser.js
| | βββ es6-module-loader.js
| | βββ es6-module-loader.js.map
| βββ index.html
| βββ index.js
Remark: you need an http server (ie: https://www.npmjs.com/package/http-server)
Now, the code:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<script src="js/vendors/browser.js"></script>
<script src="js/vendors/es6-module-loader.js"></script>
<script>
System.transpiler = 'babel';
// load index.js
System.import('index').then(function(module) {
// foo
}).catch(function (e) {
console.error(e);
});
</script>
</body>
</html>
System.import('index')
will load and execute index.js
index.js
// index.js - ES6
import Human from 'js/models/human'
let bob = new Human("Bob", "Morane");
document.querySelector("h1").innerHTML = `Hello ${bob.toString()}`;
import Human from 'js/models/human'
will load human.js
js/models/human.js
//js/models/human.js
export default class Human {
constructor (firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
};
toString () {
return this.firstName + " " + this.lastName;
}
}
And now, launch http-server
, and open http://localhost:8080/, thatβs all!