VSCode 使用es6语法调试

本人前端新手，有不对的请指出。

今天用vscode的时候用了import的时候vscode报错了 一脸懵逼

百度了许多的解决方案，感觉都不能完美解决我的需求。于是我自己研究起了解决思路。

首先，不能使用import是由于语法太新，不能够支持，所以需要使用Babel进行语法转换。

由于我之前在使用Parcel的时候一直是使用的import，所以我打起了Parcel的主意，具体使用Parcel可以参照官网http://www.css88.com/doc/parcel/getting_started.html

我整理了一下，首先需要电脑安装Yarn或者npm（要安装Node.js），然后安装Parcel

我使用的是cnpm 请替换成自己的npm

Yarn:

yarn global add parcel-bundler

npm:

cnpm install -g parcel-bundler

接下来初始化

yarn init -y

or

cnpm init -y

新建一个index.html

新建一个index.js写入任意代码

然后配置Babel

yarn add babel-preset-env

cnpm i -D babel-preset-env

然后，创建一个 .babelrc 文件：

{

    "presets": ["env"]

}

跑起来！parcel index.html

也可以将package.json中的scripts替换成如下

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "parcel index.html",

    "dev": "cnpm run start",

    "build": "parcel build index.html"

  }

这样就可以使用cnpn run dev来跑了

注意！如果这个时候报错了 说not find babel-core

安装一下即可cnpm i -D babel-core

接下来只要用vscode打开该项目

注意！请先用cnpn run dev跑一次，生成dist文件夹

修改在.vscode目录下的launch.json中的program

如果.vscode目录不存在可以F5启动调试自动生成

修改为dist目录下经过转换的js文件，我的是"${workspaceFolder}/dist\\js.1f3347f0.js"

到这一步已经结束啦，你可以尽情调试啦。

注意！每次都要开启Parcel才能调试。

注意！！打断点请在dist目录下的js文件中打。

很多地方可能有些出入，讲的不对请指出。