Please enable JavaScript.
Coggle requires JavaScript to display documents.
Webpack (Babel (Transform Plugins (Order Matters (If two transforms both…
Webpack
What is it?
A Javascript Compiler used to convert ECMAScript 2015 + into backwards compatible version of Javascript (ES6) for older browsers
Babel is a compiler - at a high level it has 3 stages that it runs code in:
- parsing
- transforming
- generation
Out of the box babel does nothing - it just parses the code and generates the same code back - need to add PLUGINS for it to do anything (plugins affect 2nd stage transformation)
-
babel-preset-env is what compiles the ES6+ to ES2015 (npm install -D babel-preset-env)
-
babel-core is a required dependency for it (keep it in dev)
Polyfill
Babel only transforms syntax (e.g. arrow functions) and the babel-polyfill has been created to use things like Promises - it uses core.js and regenerator
In order for certain features to work they require certain polyfills - you can satisfy all Babel feature requirements by using babel-polyfill
babel-polyfill emulates full ES2015+ environments and is intended to be used in an application rather than library
- It's a polyfill that is intended to be used in an application rather as a tool - need to add to dependencies not dev
- either require it in entry point file or add it in webpack
entry: ["babel-polyfill","./app/js"]
Presets
babel-preset-react is a preset used to convert JSX to to Javascript.
e.g .babelrc
{"presets":["env","react"] }
What are they?
-
babel-preset-env replaces es2015,es2016 and es2017
-
Transform Plugins
-
-
-
-
Order Matters
If two transforms both visit the 'program' node, the transforms will run in either plugin or preset order
- Plugins run before presets
- Plugin ordering is first to last
- Preset ordering is reversed (last to first)
Runs in reverse ie stage2 then react then es2015
{ "presets":[
"es2015",
"react",
"stage-2",
]
}
Setup
-
Babel 6
At the heart of Babel 6 are plugins but to get same as babel5 use:
- { "presets": ["env","react","stage-2"] }`
-
npm install babel-preset-env babel-preset-react babel-preset-stage-2 -D
-
babel-register
Use babel through the require hook which binds itself to node and automatically compiles on the fly
-
npm install babel-register --save-dev
require("babel-register");
- all subsequent files required by node with extensions .es6, .es, .jsx and .js will be transformed by Babel (include polyfill separately)
-
-
Plugins
CommonsChunkPlugin
(no longer in webpack 4) - takes all vendor code from different chunks and puts it into one common file (vendor bundle) - cache the vendor bundle - never need to dload it
-
-
-
-
-
-