https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/
When developing or react vuejs app, the developer may often need to switch different babel configuration (.bablerc) in. You should have seen the following code in package.json file:
// package.json { "babel": { "presets": [ "es2015", "stage-0" ] } }
Or .babelrc file, you may see the following things:
// .babelrc { "plugins": ["transform-class-properties"] }
In this paper, we had a good, he said said the stage-x is a what, and why we are so configured babel, that is to say we will explore babel plugins and presets.
What is Babel?
To understand why there is Babel, we need to look at the history of javascript. . .
ES5, ES6, ES7
We know that javascript is a web language, she is running in a different browser, such as chrome, firefox, safari, edge, ie so on. Different browsers have different javascript interpreter, js on these interpreter and translation engine running. Because js widely accepted internet community, more and more applications, then there is a specification for standardized management organization js language itself. js followed sepec called ecmascript or ES
The fifth edition of which is called ES5. You can imagine ES5 js language version of itself, this version was finalized in 2009, the current major browsers to achieve full ES5.
The 6th edition is called ES6, finalized in 2015, most of the mainstream browser not support its function.
ES7 is based ES6 made more improvements, the latest preliminary version was finalized in 2016, ES7 only two new features.
Js as the future, we hope to directly start using ES6 / ES7 today, but we also want our code able to run properly in the current major browsers, which is why we can produce Babel to reason. ( Except babel, typescript also be implemented similar functionality ) babel allow us to fully ES6 / ES7 specification to write js code, but compiled into es5 the code so that you can not achieve the final run on es6 specification of the current browser
Use babel
In the project, we can use in several ways babel. The easiest and quickest way is to use a package babel-standalone. You can refer to it through a script tag.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"
></script>
After the introduction of babel, babel will automatically with any text / babel for the type of script were stranpile
<div id="output"></div> <script type="text/babel"> const getMessage = () => "Hello World"; // ES6! document.getElementById('output').innerHTML = getMessage(); </script>
This project will automatically configure the reference and babel as create-react-app, so you can start writing react components 0 configuration
Babel Plugins和presets
babel provides an open architecture to do the transformation to a different feature by plugin. Due to particularly feature, it will correspond to a particularly large number bable plugin, how to manage the plugin also a challenge.
在babel中，a preset is a set of plugins used to support particular language features.
Presets are sharable .babelrc configs or simply an array of babel plugins.
There are two preset will be used babel default:
es2015: ES2015 features increased support
react: Support JSX
Remember: ES2015 is just another name for ES6, we use the ES2015 preset because we do not use the new features of ES7
In addition ES7, js features may be present in different stages. A feature can be an experimental proposal ( experimental), that is still ongoing study (stage1) on some details of the community.
experimental proposals have a very big risk would be substantially modified or discarded. A feature may also be ratified state (approval), the next release will be included in a js ( "stage4")
Specific Location:
TC39 Working Group proposals will be categorized into the following stages:
- stage-0 - Strawman: just an idea, possible Babel plugin.
- stage-1 - Proposal: this is worth working on.
- stage-2 - Draft: initial spec.
- stage-3 - Candidate: complete spec and initial browser implementations.
- stage-4 - Finished: will be added to the next yearly release.
We can be early adopters or with upcoming or functional properties of these experiments by using presets or / and plugins configuration babel.
Which plugins or presets are "safe" is?
babel will make a warning for those who feature as early as stage-3, because they may be abandoned or substantially modified. Especially if you work in education, it is best not to teach these feature, as is likely to be discarded
How to use the babel plugin and presets
There are two main ways to configure babel.
- In package.json file
You may like the following package.json document as set out presets and plugins list corresponding to:
// package.json { "babel": { // nest config under "babel" "presets": [ "es2015", "react", "stage-3" ], "plugins": ["transform-class-properties"] } }
2..babelrc
// .babelrc { "presets": [ "es2015", "react", "stage-3" ], "plugins": ["transform-class-properties"] }
Generally more recommended way to configure babel by .babelrc