学习es6笔记-环境部署

环境部署

笔者作为一个前端怎么能不会es6，所以规划学习es6顺便进阶到react(虽然写过一段时间的reactnative,但是没有系统的学习)。有想一起学习的小伙伴们不妨一起加入，交流学习☺。

编辑工具笔者使用的是vscode,因为浏览器支持的问题，将es6转换为es5，这并不影响用es6的功能，转换的工具是babel，mac环境下学习。

新建自己的工程目录

随意在本地新建一个文件夹，这是笔者练习的工程，可以选择直接拖入vscode打开，也可以cmd+o通过目录打开。

新建dist，这个文件夹默认放编译好的文件，也就是生产环境需要的文件，为了看es5和es6的区别。新建src是放es6文件的地方。当然为了区分js和其他文件可以在它们下面新建js以及其他文件夹。

接下来安装babel

cmd + ` (esc下面的键)打开终端，进入项目目录，输入以下命令

npm init -y

-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

全局安装babel-cli

npm install -g babel-cli

查看bable版本

babel --version

现在还不能转换es5，需要安装babel-preset-es2015

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文件，并打开录入下面的代码

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

这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。

vscode新建js文件，后缀名为js即可，通过命令转换到dist目录下。
可以通过新建html文件来执行js脚本。新建html文件直接输入html根据提示选择html:5可以快速新建html骨架。

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

简化转化命令：打开package.json文件，把文件修改成下面的样子。

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

build就是你的简化命令，对应的值就是真正执行的命令。
如果只使用一个文件的话，很简洁，执行以下命令。

npm run build

好了，环境已经搭建好，接下来就开始学习es6了。一起加油吧。
奉上笔者找到的比较好的中文文档