I won’t introduce ES6, just start to build the environment~
I use webstorm
1. Create a blank project ES6Demo, and the following folders
src: The folder where ES6 code is written, and the js programs written are placed here.
dist: The folder of ES5 code compiled by Babel, the js file here when the HTML page needs to be imported.
2.index.html (note the introduction of js under ./dist)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./dist/index.js"></script>
</head>
<body>
hello es6
</body>
</html>3.index.js under src
/**
* Created by barry on 2019-2-19.
*/
let a = 1;
console.log(a);4. Initialize the project
Enter npm init -y on the console and press Enter to generate the package.json file as follows
{
"name": "ES6Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5. Install bable.cli globally. If it's slow, you can use cnpm. I won't talk about it here.
npm install -g babel-cli6. Install babel-preset-es2015 and babel-cli locally
npm install --save-dev babel-preset-es2015 babel-cliAt this time, package.json has changed, compare it yourself
{
"name": "ES6Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
At the same time, there is an additional package-lock.json file
7. Create a new .babelrc file under the project
Add the code as follows:
{
"presets":[
"es2015"
],
"plugins":[]
}8. At this time, you can start to compile es6 code into es5 code, enter the command window
babel E01/src/index.js -o E01/dist/index.jsThen you can see that there is more index.js in the dist folder as follows:
"use strict";
/**
* Created by barry on 2019-2-19.
*/
var a = 1;
console.log(a);
Use a browser to open index.html, the console output 1, OK ~