ES6学习笔记（一）：ES6的开发环境搭建
2017-06-23 本文已影响0人
大青呐
一、先建立工程目录
在新建的工程目录下，新建<b>src</b>和<b>dist</b>文件夹。
<li>src：书写的ES6代码文件都放在此目录下</li>
<li>dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。</li>
二、编写index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<script src="./dist/index.js"></script>
</head>
<body>
Hi ECMA Script 6
</body>
</html>
需要注意的是，引入的js文件是dist目录下的文件。
三、编写index.js文件
let a=0;
console.log(0);
let是es6中的一种声明方式，我们需要把这个ES6的语法文件自动编译成ES5的语法文件。
四、初始化项目
打开终端或者cmd打开命令行，进入项目目录，输入以下命令：
npm init -y //-y代表全部默认同意
{
"name": "js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
五、全局安装Babel-cli
还是打开终端或者cmd打开命令行，进入项目目录，输入以下命令安装，如果安装比较慢，建议现在淘宝镜像cnpm安装。
npm install -g babel-cli
六、本地安装babel-preset-es2015 和 babel-cli
继续输入以下命令：
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后，你可以在你的目录下生成的package.json文件中看到，多了devDependencies。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
七、新建.babelrc
在项目根目录下新建.babelrc文件，并添加以下代码：
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
完成上面的全部过程后，我们就可以转换了。在终端输入转化命令，将ES6转化为ES5。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
你可以在dist文件夹下看到生成的编译文件。
八、vue简化转化命令
在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开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来转换了。
