Babel
This lets you compile transpile ES 2015 Javascript code into ES 2009 Javascript code.
It was created in 2014 by Sebastian McKenzie.
Babel is a JavaScript transpiler that allows 'new' JavaScript to run in 'old' browsers
https://babeljs.io/
It transpiles all the latest JavaScript syntax and features into regular ES 2009 JavaScript code
Extremely useful because not all browsers support all the latest JavaScript features
IE 11 does not support JavaScript ES 2015 code
Babel can convert TypeScript into regular JavaScript
Babel can convert JSX into regular JavaScript
Configuration options can be put inside the 'webpack.config.js' file (no .babelrc file)
Presets
A Preset is a group of plugins used to support particular language features
@babel/preset-env
This will transpile all ES 2015 features to ES 2009
npm install --save-dev @babel/preset-env
includes: plugin-transform-arrow-functions
includes: plugin-proposal-class-properties
@babel/preset-typescript
This lets you compile typescript.
npm install --save-dev @babel/preset-typescript
@babel/preset-react
This lets you compile JSX into regular Javascript.
npm install --save-dev @babel/preset-react
.babelrc
You can use a separate file or you can include these details into the 'webpack.config.js' file
Adding the presets and plugins to the webpack config file will only affect webpack
Anything else that uses Babel will be looking for the .babelrc file.
module: {
rules: [
{
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/react',
'@babel/preset-env'
]
plugins: [
'@babel/plugin-transform-arrow-functions'
]
}
}
}
]
babel-loader
This lets you load other babel presets.
npm install --save-dev babel-loader
babel-polyfill
This includes a custom regenerator runtime and core.js
This emulates a full ES 2015 environment
This needs to be dependency not a devDependency
This replaces '@babel/polyfill' which was deprecated in Babel version 7.4.0
@babel/core
This lets you access the babel API.
npm install --save-dev @babel/core
Plugins
A Plugin is a specific code transformation that can be included during compilation
@babel/plugin-proposal-class-properties
This lets you use class properties to write elegant React components ?
Previously called 'plugin-transform-class-properties' in Babel version 6.
Class properties were introduced in ES 2016
npm install --save-dev @babel/plugin-proposal-class-properties
@babel/plugin-transform-arrow-functions
This replaces any ES 2015 arrow functions with their function equivalents
npm install --save-dev @babel/plugin-transform-arrow-functions
@babel/plugin-transform-classes
This lets you
npm install --save-dev @babel/plugin-transform-classes
@babel/plugin-proposal-object-rest-spread
@babel/plugin-syntax-typescript (isTSX)
© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext