node调试---使用vscode调试ES6

1. 配置webpack+babel

这部分与前端工程的配置方式相同，只多了SourceMap和npm script的配置。

1.1 工程初始化

$ mkdir test && cd test
$ npm init

1.2 安装依赖

$ npm i --save-dev webpack babel-core babel-loader babel-preset-es2015

1.3 配置webpack

新建文件：./webpack.config.js，

const path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: {
        index: path.resolve('./src/index.js'),
    },
    output: {
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        path: path.resolve('./dist/'),
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

注：
（1）devtool: 'source-map'，表示以独立文件的方式建立SourceMap。
（2）devtoolModuleFilenameTemplate: '[absolute-resource-path]'，是一个模板，用来配置SourceMap文件sources数组中出现的模块路径。

1.4 配置babel

新建文件：./.babelrc，

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

1.5 配置npm script，用于编译和打包

打开文件：./package.json，

{
  ...
  "scripts": {
    ...
    "build": "webpack --progress"
  },
  ...
}

调用方式：

$ npm run build

---

2. 配置VSCode

2.1 打开工程目录

用VSCode打开工程目录./test，VSCode必须以此文件夹为根目录。

2.2 添加调试配置文件

点击工具栏：调试 -> 添加配置...
选择环境：Node.js

会自动在根目录中创建一个./.vscode文件夹，还有一个文件./.vscode/launch.json，修改它，

{
    "version": "0.2.0",

    // 多个独立的配置项
    "configurations": [  
        {
            // 语言
            "type": "node",    

            // 是调试模式，还是附着到已运行的程序上
            "request": "launch",    

            // 该配置项的名字
            "name": "Launch Program",  

            // 程序的绝对路径
            "program": "${workspaceFolder}/src/index.js",  

            // 调试之前要做的任务名
            "preLaunchTask": "build",   

            // 如果存在SourceMap就使用
            "sourceMaps": true,  

            // 是否启动后自动停止程序
            "stopOnEntry": false,  

            // 生成的代码中，如果无法映射回源代码，就自动单步执行
            "smartStep": true,  

            // 指出编译后的文件地址
            "outFiles": [
                "${workspaceRoot}/dist/**"
            ]
        }
    ]
}

2.3 新建任务

点击工具栏：任务 -> 配置任务...
选择要配置的任务：npm: build

会自动新建文件./.vscode/tasks.json，我们这样配置它，

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",  // 该任务的名字，只需要增加这一条即可
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        }
    ]
}

其中，./.vscode/tasks.json中的tasks[*].label属性，
对应于./.vscode/launch.json中的configurations[*].preLaunchTask。

---

3. 示例代码

3.1 新建目录和文件

（1）./src/index.js

import hello from './hello';
hello();  // 在这打一个断点（光标定位到这一行，按F9）

（2）./src/hello.js

export default () => console.log('Hello');

3.2 启动调试

点击工具栏：调试 -> 启动调试
或者按F5，我们发现开始调试后，程序停在了断点处。

4.实战

demo:示例代码

4.1按上述流程准备好调试环境

4.2报错处理：

报错1：webpack打包时提示Invalid configuration object错误

处理1：参考

解决：我用的webpack^4.29.6版本

根据文档修改./webpack.config.js

const path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: {
        index: path.resolve('./src/index.js'),
    },
    output: {
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        path: path.resolve('./dist/'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

报错2：webpack报错Cannot resolve module 'fs'

处理2：参考

解决：修改./webpack.config.js

const path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: {
        index: path.resolve('./src/index.js'),
    },
    output: {
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        path: path.resolve('./dist/'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    },
    node: {
        fs: "empty"
      }
};

4.3无报错之后，就用调试控制台配合断点开始调试吧