由于有些低版本的瀏覽器還不支持ES6的語法，所以在不使用框架的情況下，需要將ES6語法轉(zhuǎn)換為ES5語法
下面我在VS Code操作的所有命令
項(xiàng)目目錄
項(xiàng)目目錄
一，先創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目中有兩個(gè)文件夾，src和dist，一個(gè)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， 在項(xiàng)目的根目錄初始化項(xiàng)目并生成package.json文件(可以根據(jù)自己的需求進(jìn)行修改)
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語法轉(zhuǎn)換為ES5）
cnpm install -g babel-cli
3， 當(dāng)然現(xiàn)在還不能正常轉(zhuǎn)換，還需要安裝ES5所需的一個(gè)包
cnpm install --save-dev babel-preset-es2015 babel-cli
安裝完成后，package.json會(huì)有所變化
{
"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， 在項(xiàng)目的根目錄添加一個(gè) .babelrc 文件，并添加內(nèi)容
{
"presets":[
"es2015"
],
"plugins": []
}
5，安裝完成后我們可以通過命令進(jìn)行轉(zhuǎn)換
babel src/index.js -o dist/index.js
6，當(dāng)然我們可以將命令進(jìn)行簡化（package.json進(jìn)行配置）
"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 轉(zhuǎn)義代碼
聲明：本文摘抄于別的文獻(xiàn)，只用于自己的一個(gè)快速搭建
