前端如何使用node或编辑器断点调试es6代码

背景

在前端开发中，经常使用 ES6 的代码进行开发，尤其是使用 ES MODULE 的方式进行模块化开发，即 import export 。

在 Node.js 中，直接使用 ES MODULE 会报错 

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 

SyntaxError: Cannot use import statement outside a module

可以通过 babel 将代码转化为 Node.js 可以解析的代码。进而在终端或 IDE 中进行断点调试。

处理步骤

1. 安装 babel npm install --save-dev @babel/core @babel/node
2. 安装 preset npm i @babel/preset-env --save-dev

使用

注意：babel-node 对 import 语法默认也是关闭的，因此需要安装指定的 preset 并配置

• 方式1 通过命令行执行 npx babel-node --presets @babel/preset-env 你的文件的路径+名字.js
• 方式2 也可以在编辑器中进行断点调试，以 webstorm 为例，如下图配置一个调试

最后

这里说的是如何调试，调试完成后，在生产环境中使用开发完的代码时，要提前 build 好，执行的是 build 后的代码。