title

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

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

Static transpiling with Babel-CLI

January 2, 2018

Hello World