Installation and configuration of Babel7
This article mainly explains the "method of installation and configuration of Babel7". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn the method of installation and configuration of Babel7.
Babel is a JavaScript compiler. Babel is a chain of tools that is primarily used to convert code from the ECMAScript 2015+ version into a backward-compatible JavaScript syntax so that it can run in current and older browsers or other environments. From version 7, the installation of Babel is different from the previous installation, which should be careful to write the right package name during installation.
7 installation method:
Npm install-- save-dev @ babel/core @ babel/cli @ babel/preset-env npm install-- save @ babel/polyfill
In previous versions, the @ symbol was not preceded by babel.
The above command is the currently developed workspace of the installation. For global installation, please change the parameter to-g.
Create a new babel.config.js file under the project directory, and of course the .babelrc file used in the new version 6 can also be used.
Example of the contents of the babel.config.js file. Targets is the browser version of the target, which can be modified in actual use.
Const presets = [
"@ babel/env"
{
Targets: {
Edge: "17"
Firefox: "60"
Chrome: "67"
Safari: 11.1
}
UseBuiltIns: "usage"
},],]
Module.exports = {presets}
Execute commands for conversion scripts, commands for folders, and conversions for individual files.
. / node_modules/.bin/babel src-- out-dir lib
. / node_modules/.bin/babel sample.js-o buildenv.js
You can configure script execution in package.json:
In version 7, there is no setting similar to es2015 in presets. In version 7, it should be set to @ babel/preset-env. Participate in the following English instructions: @ babel/preset-es2015@7.0.0-beta.53:? We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x i
T would be @ babel/preset-env.
In JavaScript development, we can use the new ECMAScirpt syntax, and then use Babel to convert the code into a browser-compatible way. Thank you for your reading, the above is the content of "Babel7 installation and configuration method". After the study of this article, I believe you have a deeper understanding of the installation and configuration method of Babel7, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
