VS Code + webpack 調式 lodash 源碼（如何用VS Code調式ES6代碼）

文章首發：https://github.com/giscafer/g...

前言

node.js在 v8.5 版本以後能夠直接支持ES6模塊，可是有個限制就是，須要爲.mjs後綴的文件才行，好比有個es6代碼文件爲test.mjs，能夠直接用node.js運行調式： node --experimental-modules test.mjs。

有限制就不靈活了，看lodash源碼文件，兩百多個源碼文件都是ES6語法，文件名稱是.js，想在VS Code中直接node啓動調式是不行的，仍是須要用到babel才行。

下邊介紹VS Code 如何配置 webpack+babel 調式es6代碼的環境

第三方模塊環境準備工做

npm i babel-core babel-loader webpack --save-dev

webpack配置文件

webpack.config.js

const path = require('path');
module.exports = {
    devtool: 'source-map',
    entry: {
        index: path.resolve('./test/index.js'), // 文件主入口
    },
    output: {
        path: path.resolve('./dist/'),  // 打包文件位置
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

package.json文件scripts配置

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

VS Code 啓動配置

按下 F5 會自動建立launch.json默認配置，咱們作調整修改就行

{
    "version": "0.2.0",

    // 多個獨立的配置項
    "configurations": [  
        {
            // 語言
            "type": "node",    

            // 是調試模式，仍是附着到已運行的程序上
            "request": "launch",    

            // 該配置項的名字
            "name": "Launch Program",  

            // 程序的絕對路徑
            "program": "${workspaceFolder}/test/index.js",  

            // 調試以前要作的任務名
            "preLaunchTask": "build",   

            // SourceMap
            "sourceMaps": true,  

            // 是否自動中止程序
            "stopOnEntry": false,  

            // 生成的代碼中，若是沒法映射回源代碼，則自動單步執行。
            "smartStep": true,  

            // 編譯後的文件地址
            "outFiles": [
                "${workspaceRoot}/dist/**"
            ]
        }
    ]
}

而後建立任務 task.json，步驟：任務菜單——配置任務

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",  // 這裏是任務名稱，對應launch.json中的preLaunchTask屬性配置
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        }
    ]
}

調式測試

完成上邊的步驟後，就結束了，在你配置的對應webpack entry文件入口，寫ES6代碼後，打斷點，按下F5便可看到斷點調式效果。

好比個人test/index.js文件代碼以下，引入的是lodash的add.js源碼

import add from '../add.js';

console.log(add(1,2));

在add.js裏邊依賴的模塊baseGetTag斷點調式截圖：

總結

無論什麼框架仍是庫的源碼，咱們閱讀源碼的時候，爲了更容易理解代碼邏輯，確定是須要源碼調式的分析。使用nodejs環境調式使得效率更高，直接再IDE中閱讀源碼，直接調式看效果。