由于有些低版本的瀏覽器還不支持ES6的語法煤杀，所以在不使用框架的情況下汇陆，需要將ES6語法轉換為ES5語法
下面我在VS Code操作的所有命令
項目目錄
項目目錄
一垦垂，先創(chuàng)建一個項目宦搬，項目中有兩個文件夾，src和dist劫拗，一個html文件
- src：將編寫的ES6的js文件放到此文件夾中（這里是index.js文件）
- dist：將通過Babel編譯成的ES5的js文件放到此文件中（這里是index.js文件）
- html：注意：將dist中編譯好的文件引入到HTML文件中间校，而不是src中的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<script src="./dist/index.js"></script>
<body>
EXMA Script 6
</body>
</html>
二，搭建環(huán)境
1页慷， 在項目的根目錄初始化項目并生成package.json文件(可以根據(jù)自己的需求進行修改)
cnpm init -y
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2憔足，安裝Babel插件（將ES6語法轉換為ES5）
cnpm install -g babel-cli
3胁附， 當然現(xiàn)在還不能正常轉換，還需要安裝ES5所需的一個包
cnpm install --save-dev babel-preset-es2015 babel-cli
安裝完成后滓彰，package.json會有所變化
{
"name": "es6",
"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"
}
}
4控妻， 在項目的根目錄添加一個 .babelrc 文件，并添加內(nèi)容
{
"presets":[
"es2015"
],
"plugins": []
}
5找蜜，安裝完成后我們可以通過命令進行轉換
babel src/index.js -o dist/index.js
6饼暑，當然我們可以將命令進行簡化（package.json進行配置）
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
然后我們可以通過 npm run test 轉義代碼
聲明：本文摘抄于別的文獻，只用于自己的一個快速搭建
