es6总结(一) ——开发环境

我们使用Babel把ES6编译成ES5

安装方法：

　　　　a.先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

• • • src：书写ES6代码的文件夹，写的js程序都放在这里。
    • dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件

　　　　  b.写一个index.html

　　　　c.在src写一个index.js

　　　　d.安装命令：

1. npm init -y
2. 全局安装 npm install -g babel-cli
3. 本地安装babel-preset-es2015 和 babel-cli　 npm install --save-dev babel-preset-es2015 babel-cli
4. 在根目录下新建.babelrc文件，并打开写入代码　　

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

5. 简化转换的命令（此时转换命令为babel src/index.js -o dist/index.js）　　　　　　　　　

　　　　　　　　　打开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