第1节：ES6的开发环境搭建

第1节：ES6的开发环境搭建

1，建立html文件
2，引用js文件，注意是dist目录下的文件
3，编写js文件，很简单，作一个a变量的声明，并用console打印出来

let a = 1;
console.log(a);

let是ES6的一种声明方式，接下来把这个ES6的语法文件自动编程成ES5的语法文件。

4，初始化项目：在安装Babel之前，需要npm init -y命令来初始化
-y表示全部默认同意，就不用一次次按回车。命令执行完成后，会在项目根目录下生产package.json文件（可以根据自己需要进行修改，比如修改name值）。

{
  "name": "ES6",
  "version": "1.0.0",
  "description": "这是es6教程代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "xsm",
  "license": "ISC"
}

5，全局安装babel-cli

npm install -g babel-cli

6，试一下是否能成功进行转换：

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

7，本地安装babel-preset-es2015和babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

8，安装完成后package.json多了

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
}

9，在根目录下新建.babelrc文件，并写下列代码：

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

10，建立完成后载输入转换命令，这次ES6成功转化为ES5的语法

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

11.简化转化命令：打开package.json，修改成这样

"scripts": {
  "build": "babel src/index.js -o dist/index.js"
},

修改好后就可以使用npm run build进行转换了。

不过我用的webstorm，不是VSCode，所以有直接在webstorm上设置ES6写法和自动转化成ES5的方法，用webstorm的小伙伴下面有网址可以看着改哦！