Configuration and use of Babel

1. Installation:

"There are many ways to convert es6 to es5:

=="1. You can use online compilation. babel online compilation

=="2. Local global installation or project installation of babel-cli, you can install es6–>es5

===="2.1 local global installation: 

npm install -g babel-cli

===="2.2 project installation (recommended):

npm install babel-cli --save-dev

--save is to write babel-cli into packge.json file, -dev is to write babel-cli into development dependencies, not production dependencies

2. Create a new .babelrc file

"1. New: (because the win system does not allow new empty file names)
==" 1.1 Use the editor (sublime) to create a new .babelrcfile (this editor can be successfully created)
== "1.2 Use the cmd command to create a new file:type nul>.babelrc

》2. Content:

{
    "presets": "es2015"
}

If this content is not filled in, the compilation will fail

3. Compile:

Configuration under scripts in packge.json:

"build": "babel src --watch --out-dir lib"

Then run:

npm run build

It will compile all the js files in the src directory into the lib directory, and implement constant monitoring
*
1. src, lib are directories;
2. --watch monitors changes and automatically compiles
3. --out-dir indicates that the type of compilation is File
4. After configuring under scripts in packge.json, it can be runnpm run build

Fourth, with Babel common commands:

1. Convert the es6.js file and output it in the current named line program window

babel es6.js

2. Convert es6.js and output it to es5.js file (use -o or --out-file )

  babel es6.js -o es5.js 

  babel es6.js --out-file es5.js

3. Monitor es6.js in real time and recompile as soon as there are changes (use -w or –watch )

  babel es6.js -w --out-file es5.js

  babel es6.js --watch --out-file es5.js

4. Compile the entire src folder and output to the lib folder (use -d or --out-dir)

  babel src -d lib

  babel src --out-dir lib

5. Compile the entire src folder and output to a file

  babel src --out-file es5.js

6. Enter the babel-node command directly, you can run ES6 code directly on the command line

 babel-node

refer to the original text

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324769396&siteId=291194637