capint
5/14/2017 - 12:13 PM

MERN >> Transform jsx to js with babel

MERN >> Transform jsx to js with babel

1. npm install --save-dev babel-cli babel-preset-react
// --save-dev: just for development, not installed in production

2. node_modules/.bin/babel src --presets react --out-dir static
// Transform

3. In package.json add 2 commands compile and watch:
"scripts": {
  "compile": "babel src –presets react –out-dir static",
  "watch": "babel src –presets react –out-dir static –watch"
},
=> npm run compile OR npm run watch

4. Transfrom JS ES5 to ES2015
npm install –save-dev babel-preset-es2015
"scripts": {
    "compile": "babel src --presets react,es2015 --out-dir static",
    "watch": "babel src --presets react,es2015 --out-dir static --watch",
}

5. Add polyfill to index.html to use built-in functions in ES2015
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.13.0/polyfill.js">
    </script>