When you develop large React application for production level in-line traspiling is not going to work. So we can do static transpiling with Babel CLI. We will see how to install the Babel CLI
Your source JS file is located at src\index.js
ReactDOM.render(Hello World
, document.getElementById('root') )
Your index file is loacated root of your working folder and it will have the following contents
title
First you can navigate to your working folder and run the following command in terminal
npm init
Then you can answer the question in command line and generate package.json
file as shown in below
{ "name": "static-babel", "version": "1.0.0", "description": "Static babel compile", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Mark Taylor", "license": "ISC" }
Next, I am going to install Babel-CLI
npm install --save babel-cli
I will create another file called .babelrc
in the working directory. This file will have all the presets that Babel needs to compile the JS code
{ 'presets':['latest','react','stage-0'] }
Now you can install the preset using following command in your terminal
npm install --save-dev babel-preset-latest babel-preset-react babel-preset-stage-0
Now you can compile the source file located at src\index.js
and put the compiled javascript file at dist folder
babel ./src/index.js --out-file ./dist/index.js
Now you can run the httpster
command in terminal and open the index.html file on http://localhost:3333/
Finally you can do some adjustment to scripts section in package.json
file so that you can start the webserver after compiling the jsvsscript code
{ "name": "static-babel", "version": "1.0.0", "description": "Static babel compile", "main": "index.js", "scripts": { "start": "httpster" }, "author": "Mark Taylor", "license": "ISC", "dependencies": { "babel-cli": "^6.26.0" }, "devDependencies": { "babel-preset-latest": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1" } }
Now you can run the following command in terminal and open the index.html
file in http://localhost:3333/
npm start