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
|
1 2 3 4 5 |
ReactDOM.render( <h1 id='title' className='header'>Hello World </h1>, document.getElementById('root') ) |
Your index file is loacated root of your working folder and it will have the following contents
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <title>title</title> </head> <body> <div id='root'> </div> </body> <script type='text/javascript' src="dist/index.js"> </script> </html> |
First you can navigate to your working folder and run the following command in terminal
|
1 |
npm init |
Then you can answer the question in command line and generate package.json file as shown in below
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "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
|
1 |
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
|
1 2 3 |
{ 'presets':['latest','react','stage-0'] } |
Now you can install the preset using following command in your terminal
|
1 |
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
|
1 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "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/
|
1 |
npm start |