ES6 - 基础学习(1): 开发环境搭建

如今Chrome浏览器已经很好的支持ES6了，但有些低版本的浏览器或其余浏览器仍是不支持ES6的语法，所以实际项目开发或上线过程当中就须要把ES6的语法转变成ES5的语法。项目开发过程当中 Webpack 有自动编译转换功能，所以免去了环境搭建这一步。但除了Webpack自动编译外，咱们还能够用Babel来完成编译。下面搭建一个基本的ES6开发环境。

1、全局安装babel-cli

　　在CMD终端命令行 或 代码编辑工具(vscode、webstorm) 终端中 输入如下命令，全局安装babel-cli。

　　npm install -g babel-cli 或 cnpm install -g babel-cli

2、新建源文件目录和基础文件 index.html、jindex.js

　　一、新建源文件目录和基础文件 index.html、jindex.js

　　　　

　　　　

　　二、项目初始化

　　　　npm init -y

　　　　

　　　　

3、本地安装babel-preset-es2015 和 babel-cli

　　npm install --save-dev babel-preset-env 或 cnpm install --save-dev babel-preset-env

　　npm install --save-dev babel-cli 或 cnpm install --save-dev babel-cli

　　固然也能够两个命令合并执行

　　npm install --save-dev babel-preset-env babel-cli 或 cnpm install --save-dev babel-preset-env babel-cli

　　安装完成后，package.json文件中会自动添加 devDependencies 属性及内容。

　　　　

　　新建 .babelrc文件，在根目录下新建.babelrc文件，并键入如下代码。　　（注：.babelrc文件就是通常的文本文件，不是json文件）

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

　　.babelrc文件创建完成后，全部的准备工做所有就绪。如今能够在终端命令行 输入转换命令：babel src/index.js -o dist/index.js。

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

　　　　

3、简化(格式化)转换命令

　　上面那一串命令是否是既长又不规则，输起来还麻烦，记起来也麻烦。因此迫切须要将上面那一串命令简化和格式化，刚好这段时间一直在整Electron，Electron项目的启动命令：npm start；打包命令：npm run-script package 都很简洁且规整，因此能够借鉴这一点。

　　打开 package.json文件，找到  "scripts" 项，把想简化和格式化成的命令 写入 "scripts" 内。如想简化成：npm run dev，则在 "scripts" 内添加以下代码：

　　 "dev": "babel src/index.js -o dist/index.js"

　　如想简化成：npm run build，则把 dev 换成 build 便可，改为以下便可：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel src/index.js -o dist/index.js"
    },

　　按照这种格式，哪怕想格式化成本身的姓名都行。既方便记忆，又方便输入。修改好之后，下次转换代码直接输入和执行命令：npm run xxxxxx 就好了(甚至直接用 npm run xxxxxx 当命令都行)。下面是 package.json 所有代码以及效果截图：

{
    "name": "ES6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "xxxxxx": "babel src/index.js -o dist/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0"
    }
}

　　　　　　

到此为止，ES6的本地开发环境正式搭建完毕，下面就能够随意学习和开发了，并进行代码转换。