本人前端新手,有不对的请指出。
今天用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文件中打。
很多地方可能有些出入,讲的不对请指出。