1.前提是你已经安装了node,npm
2.手动创建一个工作目录 dist,src,index.html
以下是index.html的内容
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./dist/index.js"></script>
</head>
<body>
</body>
</html>
3.在src 目录下创建一个index.js,这里写我们的es6代码
class Car{
constructor(maker,price){
this.maker=maker;
this.price=price;
}
getInfo(){
console.log(this.maker+"costs"+this.price);
}
}
var car1=new Car("me",100);
car1.getInfo();
var car2=new Car("he",100000);
car2.getInfo();4.接下来我们需要把es6语法编译成我们浏览器所识别的语法es5文件，那就用到我们的神奇 babel,在安装babel之前我们要先初始化一下项目 npm init -y
5全局安装babel-cli
输入以下命令 ：cnpm install -g babel-cli
此时package文件中就有babel的依赖了
你以为安装babel-cli就完事了吗，你可以运行babel src/index.js -o dist/index.js
你会发现，确实在dist下面生成了一个index.js文件，但是还是es6语法啊
来，我们再安装一个转换包
cnpm install --save-dev babel-preset-es2015 babel-cli 安装完成之后我们的json文件就有依赖了，
touch .babelrc执行这个命令 来创建一个文件，这个文件里面书写如下代码
{
"presets":[
"es2015"
],
"plugins":[]
}好了，此时再去执行刚刚那个命令 babel src/index.js -o dist/index.js
你会发现我们的es6代码已经转化成es5代码了
我们每次执行那么长的命令是不是有点太麻烦啊，我们现在来修改一下pakage.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.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
现在我们运行 npm run build 就可以啦
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。