环境配置
编辑器：vscode；
建立工程目录：
先建立一个文件夹，在此文件夹下面在建立两个名为src和dist文件夹。
*src ：书写es6代码，所有源码都放在这里。
*dist：编译过后的es5代码，在html中需要引入这里的js文件
图片.png
编写index.html：
<!DOCTYPE html>
<html>
<head>
<title>环境配置</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);
初始化项目
npm init -y
-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产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
转换命令 babel src／index.js -o dist/index.js;
但是此时只能在dist生成index.js 并没有转译；还要安装转换包
本地安装 babel-preset-es2015 和 babel-cli
cnpm i --save-dev babel-preset-es2015 babel-cli
新建.babelrc
在根目录下新建.babelrc文件，并打开录入下面的代码
{
"presets":[
"es2015"
],
"plugins":[]
}
这个文件完成后 ，现在输入转换命令就可以完成了。
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 来进行转换了。
