環(huán)境配置
編輯器：vscode蜕企；
建立工程目錄：
先建立一個(gè)文件夾劲厌，在此文件夾下面在建立兩個(gè)名為src和dist文件夾。
*src ：書寫es6代碼刽射，所有源碼都放在這里怀跛。
*dist：編譯過后的es5代碼，在html中需要引入這里的js文件
圖片.png
編寫index.html：
<!DOCTYPE html>
<html>
<head>
<title>環(huán)境配置</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
注意：這里引入的是dist中的js文件柄冲。
<script src="./dist/index.js"></script>
編寫index.js
這是在src文件中編寫吻谋，
let a=1;
console.log(a);
初始化項(xiàng)目
npm init -y
-y代表全部默認(rèn)同意，就不用一次次按回車了现横。命令執(zhí)行完成后漓拾，會(huì)在項(xiàng)目根目錄下生產(chǎn)package.json文件。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build":"babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
全局安裝babel-cli
在終端中 npm i babel-cli -g 如果慢的話戒祠，可以使用淘寶鏡像cnpm i babel-cli -g骇两；
mac 用戶 ： sudo cnpm i babel-cli -g
轉(zhuǎn)換命令 babel src／index.js -o dist/index.js;
但是此時(shí)只能在dist生成index.js 并沒有轉(zhuǎn)譯；還要安裝轉(zhuǎn)換包
本地安裝 babel-preset-es2015 和 babel-cli
cnpm i --save-dev babel-preset-es2015 babel-cli
新建.babelrc
在根目錄下新建.babelrc文件姜盈，并打開錄入下面的代碼
{
"presets":[
"es2015"
],
"plugins":[]
}
這個(gè)文件完成后 低千，現(xiàn)在輸入轉(zhuǎn)換命令就可以完成了。
babel src/index.js -o dist/index.js
簡化命令
打開package.json文件，把文件修改成下面的樣子
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
修改好后示血，以后我們就可以使用 npm run build 來進(jìn)行轉(zhuǎn)換了棋傍。
