vscode之调试es6代码

vscode不支持es6的代码调试，但是可以通过babel把es6代码转成es5之后，在进行调试。

步骤如下：

第一步：

在本地项目路径下npm init，之后会生成一个package.json文件

第二步：

之后再执行

本地安装babel命令行工具 -- 每个项目安装一个，尽量不要在全局安装一个babel。

npm install --save-dev babel-cli

如果你已经全局安装了babel，可以使用如下的命令进行卸载

npm uninstall --global babel-cli

执行完以后，package.json的显示内容

第三步：在命令行中调用babel

本地安装的babel是不能够在直接命令行中运行的，为了在命令行中运行babel，需要配置下package.json文件的scripts项。比如如下代码，配置了一个build命令，运行该命令(npm run build)的时候就会在命令行执行babel src -d build -s

{
  "name": "myjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d build -s"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1"
  }
}

第四部：创建.babelrc配置文件

第五步：

安装babel的转译器

这里我们以babel-preset-env为例。

在命令行中执行如下代码就会安装babel-preset-env转译器。

D:\webpack\demo\es6>npm install --save-dev babel-preset-env

注意：babel命令行工具（babel-cli）跟babel转译器是两个不同的东西，命令行工具并不具有转译代码的功能，只是为了在命令行中使用babel。要转码必须安装转译器，比如babel-preset-env转译器或者babel-preset-react转译器。要转译的时候，还要在.babelrc文件或者命令行中配置这些转译器(presets)选项

第六步：配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。

.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行 babel src -d lib --presets=env 等价于在.babelrc中配置 "presets":["env"]。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用这些配置选项来转译代码。

关于.babelrc的注意点如下。

1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也没有配置--presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。

2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错

3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准

{
    "presets": [
        "es2015",
        "stage-2"
    ]
}

安装其他的依赖：

    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015

    # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

第七步：

编写es6代码

新建两个文件：