- In my previous post we have learnt about Babel installation and basic use of compiling the code to ES5 JavaScript Code.
- Babel comes with an in-browser compilation option to compile the code in the runtime.
- In this demo,”We will learn to use in browser compilation for Babel to produce ES5 JavaScript Code during rendering time”.
- To know about steps to install check my previous post. The Babel comes with Command Line Interface(CLI),Require hook and Browser sub module default installed.
- The demo project structure is as follows where app.js contains the featured advance code.
- The index.html file contains the code for displaying the output in browser.The code content of index.html file is as follows.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Babel In Browser Compilation Demo</title>
<script src="node_modules/babel/node_modules/babel-core/browser.js"></script>
</head>
<body>
<script type="text/babel" src="app.js"></script>
</body>
</html>
- In index.html file we have added the in browser compiler called Browser.js for doing compilation during run/render time.The in-browser compiler detects the feature code by checking <script> element having type attribute value text/babel.
<script type="text/babel" src="app.js"> </script>
- The output of above code will be rendered as following screenshot.
- The demo code can be downloaded from the following link.
https://github.com/saan1984/BabelInBrowserDemo
