Array.from
and built-ins like Promise
are only available in ES6+, but they can be used in older environments if a Babel polyfill is used@babel/register is often used in Node.js. It makes the babel run dynamically when the require
code is executed. Since it’s not popular way to run babel in React, we are not going to deal with @babel/register way
First of all, Let’s create a sample project
— Create a directory and package.json
test-babel-how
npm init -y
mkdir test-babel-how
cd test-babel-how
npm init -y
— Install the necessary packages
npm i @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react
— Create a sample code
src
folder and create code.js
in the src
foldertest-babel-how
|
-- node_modules
-- src
|
-- code.js
-- package-lock.json
-- package.json
const element = <div>babel test</div>; // 1
const text = `element type is ${element.type}`; // 2
const add = (a,b)> a + b; // 3
We are going to:
1: Transpile JSX syntax using react preset
2: Transpile template literal using template literal plugin
3: Transpile arrrow function using arrow function plugin
— run the following command in the terminal
npx babel src/code.js // 1
--presets=@babel/preset-react // 2
--plugins=@babel/plugin-transform-template-literals, // 3
@babel/plugin-transform-arrow-functions
1: Babel command and tells where the code exists src/code.js
2: We are using a preset @babel/preset-react
3: We are using 2 plugins @babel/plugin-transform-template-literals
& @babel/plugin-transform-arrow-functions
— Following output in the terminal
const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3
// 1 : JSX syntax is converted to createElement function call
// 2 : template literal is converted to string with a concat
method
// 3 : arrow function is converted to normal function
— install packages to use webpack
npm i webpack webpack-cli babel-loader
— create a **babel.config.js**
file
const presets = ['@babel/preset-react'];
const plugins = [
'@babel/plugin-transform-template-literals',
'@babel/plugin-transform-arrow-functions'
];
module.exports = { presets, plugins };
babel.config.js
to specify presets & plugins— create a **webpackge.config.js**
file
const path = require('path');
module.exports = {
entry: './src/code.js', // 1
output: { // 2
path: path.resolve(__dirname, 'dist'),
filename: 'code.bundle.js',
},
module: { // 3
rules: [{ test: /\.js$/, use: 'babel-loader'}],
},
optimization: { minimizer: []} , // 4
}
webpack.config.js
1: specify a file to do a bundling using webpack
2: save the result to dist/code.bundle.js
file
3: let babel-loader
to handle JavaScript files
4: webpack compresses JavaScript file by default for optimization. But, let’s not optimize (compressing JavaScript file) to see if output is as expected
babel.config.js
file— run webpack
npx webpack
— dist/code.bundle.js
is created with a following output
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
// ...
// ...
/* 0 */
/***/ (function(module, exports) {
const element = /*#__PURE__*/React.createElement("div", null, "babel test"); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3
/***/ })
/******/ ]);
// ...
part is webpack’s run time code— create **runBabel.js**
file
const babel = require('@babel/core'); // 1
const fs = require('fs');
const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8'); // 2
const presets = ['@babel/preset-react']; // 3
const plugins = [
'@babel/plugin-transform-template-literals',
'@babel/plugin-transform-arrow-functions',
];
const { code } = babel.transformSync(source, { // 4
filename,
presets,
plugins,
configFile: false, // 5
});
console.log(code); // 6
runBabel.js
1: get @babel/core module
2: get the file code.js
to compile
3: set presets & plugins
4: execute babel using transformSync
function
5: let not to use babel.config.js
configuration file
6: print converted code
— run file
node runBabel.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3
Babel’s transpiling functionality is very necessary tool in today’s fast evolving JavaScript community. Hope you understand Babel little bit more :)
In this article, we went through 3 ways to run Babel. Thank you!
#react #javascript #nodejs #programming