First of all, you need to have any of the three package managers, npm or cnpm or yarn. This installation is based on Visual Studio Code
It means that it is running in the terminal of vscode. When it is opened, if an error is reported after entering the command in the terminal, it may be that node is not installed and configured. You can search it online. After configuration, you need to restart the computer. If all of the above are available, then do the following:
-
If you enter babel --version and no version number appears, you need to execute the following code
cnpm install -g babel-cli
-
New app01 folder
-
Enter the app01 folder and initialize the current folder as a nodejs project
After a series of operations, npm init or
npm init -y
will eventually create a package.json file, which saves the configuration information of the entire project -
Create a new src folder, create a.js under the src folder, write ES6 code in the a.js file
let a = 1;
let test = () => {} -
Install babel
cnpm install --save-dev babel-cli or
cnpm install --save babel-cli
–save-dev means production dependency, which is only used during project development –
save means product dependency, which will also be used when the product is online -
Install babel preset [conversion rules]
cnpm install --save-dev babel-preset-latest
-
Create and configure a .babelrc file in the root directory of the project, pay attention to the "."
{ "presets":["latest"] } -
Use babel to convert ES6 code to ES5 code
in src path
> babel a.js
in app01 path
> babel src/a.jsexpand:
- If it is just a single file, a b.js file will be generated after converting a.js to ES5 code
babel a.js --out-file b.js
- If there are multiple files, directly convert its parent folder: Convert the src folder to ES5 code to generate a dist folder
babel src --out-dir dist
- You can configure
"scripts" in the package.json file : { "build": "babel src --out-dir dist", }, and then every time you execute npm run build in the root directory of the project, you can perform src Convert and then sign out the dist folder
- If it is just a single file, a b.js file will be generated after converting a.js to ES5 code