ES6学习笔记(1)--ES6的环境搭建

引言：最近在学习vue，用vue去做项目，发现很多大神的教程当中很多实用了ES6的语法，这让我这个还不会ES6的渣渣很难受，于是决定开始学习ES6，并做这个笔记。望能坚持!

计划

   这里我看的是技术胖的博客，我很喜欢技术胖的教学视频，以后工作，一定要给技术胖支持，希望他越做越好哈哈哈，话不多说。写下我的计划

看视频入门

看官方文档巩固

开始学习（视频学习）学习技术胖视频

1.ES6开发环境搭建

前言：据说是ES6目前很多浏览器对他的支持不咋地，所以需要将ES6的语法转换成ES5，这里使用的是Babel把ES6编译成ES5

一下是我的文件目录结构

|dist            这里放编译之后的文件，将es6语法转换成es5时就放在这个文件夹下
|src             资源文件，就是我用es6写的东西全部放这里
---index.js    
|index.html      html文件
|.babelrc        这个是babel的配置文件

 初始化项目

npm init -y          //-y意思是默认，不用一个一个的输入

安装babel

npm install babel-cli -g   

npm install babel-core --save

我用npm安装失败了，可能是网络的原因没建议大家使用cnpm,毕竟是国内的镜像，速度也比较快

但是这个时候还是不能编译的，所以还要安装 babel-preset

 cnpm install --save-dev babel-preset-es2015

同时配置.babelrc文件

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

打开src/indx.js编写代码

let a= 1;        //不用var主要是区别于es5,let是es6语法里面的
console.log(a);

然后打开终端（如果使用的是vscode的话，直接Ctrl+~就可以打开）输入：

babel src/index.js -o dist/index.js

然后就会在dist文件夹下生成index.js文件，我们打开看一下，这里就变成了es5的语法了，let变成var

这样，ES6基本环境就搭建完毕了。

然后我们会发现一个问题就是，每次编译js文件我们都要在终端敲babel src/index.js -o dist/index.js 会很麻烦代码太长了，所以我们可以采用在package.json中的script指定编译代码，类似于npm run dev这样可以省下很多功夫，如下：

package.json:

{
  "name": "ES6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel src/index.js -o dist/index.js"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1"
  }
}

这样我们直接在终端输入：npm run build  就行了。

下一篇：ES6学习笔记(2)--ES6的新的声明方式