ES6学习笔记（一）：ES6的开发环境搭建

一、先建立工程目录

在新建的工程目录下，新建src和dist文件夹。

src：书写的ES6代码文件都放在此目录下

dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。

二、编写index.html文件

    
        
        
        
    
    
        Hi ECMA Script 6
    

需要注意的是，引入的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来转换了。