ES6我就不介紹了,直接開始搭建環境~
我是用webstorm的
1.新建一個空白的項目ES6Demo,和以下文件夾
src:書寫ES6代碼的文件夾,寫的js程序都放在這裏。
dist:利用Babel編譯成的ES5代碼的文件夾,在HTML頁面需要引入的時這裏的js文件。
2.index.html(注意引入的是./dist下的js)
<!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.src下的index.js
/**
* Created by barry on 2019-2-19.
*/
let a = 1;
console.log(a);
4.初始化項目
控制檯輸入 npm init -y ,回車生成package.json文件如下
{
"name": "ES6Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5.全局安裝bable.cli,如果比較慢,可以使用cnpm,這裏不多講了
npm install -g babel-cli
6.本地安裝babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
這時,package.json發生了變化,自己對比一下
{
"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"
}
}
同時,多了一個package-lock.json文件
7.在項目下新建.babelrc文件
添加代碼如下:
{
"presets":[
"es2015"
],
"plugins":[]
}
8.這時,可以開始將es6代碼編譯爲es5代碼了,命令窗口輸入
babel E01/src/index.js -o E01/dist/index.js
然後可以看到dist文件夾下多了個index.js如下:
"use strict";
/**
* Created by barry on 2019-2-19.
*/
var a = 1;
console.log(a);
使用瀏覽器打開index.html,控制檯輸出1,OK ~