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

SHERlocked93 發布于2019-08-21 18:27 / 3181人閱讀

摘要：有限制就不靈活了，看源碼文件，兩百多個源碼文件都是語法，文件名稱是，想在中直接啟動調式是不行的，還是需要用到才行。使用環境調式使得效率更高，直接再中閱讀源碼，直接調式看效果。

文章首發：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中閱讀源碼，直接調式看效果。

云服務器 GPU云服務器 vs 調式 asp VS Code如何 VS Code 可以在瀏覽器運行了？微軟調式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90486.html

深入理解 Webpack 打包分塊（上）

摘要：而一個哈希字符串就是根據文件內容產生的簽名，每當文件內容發生更改時，哈希串也就發生了更改，文件名也就隨之更改。很顯然這不是我們需要的，如果文件內容發生了更改，的打包文件的哈希應該發生變化，但是不應該。前言隨著前端代碼需要處理的業務越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的時間和帶寬...

Rocko 2019-05-21 16:11 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
深入理解 Webpack 打包分塊（下）

摘要：例如允許我們在打包時將腳本分塊利用瀏覽器緩存我們能夠有的放矢的加載資源。文章的內容大體分為兩個方面，一方面在思路制定模塊分離的策略，另一方面從技術上對方案進行落地。我之前提到測試之下是什么樣具體的場景并不重要。前言隨著前端代碼需要處理的業務越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的...

pingan8787 2019-05-22 19:26 評論0 收藏0
如何提升VS Code擴展的啟動速度——不只是Webpack

摘要：同時它又需要監聽事件，當物聯網設備插入計算機后做出響應。比如以熱啟動打開物聯網項目工作區的啟動時間在表中是毫秒，但是正在運行的擴展頁面中大約是毫秒。當在中應用懶加載時，無論是否使用打包模塊，沒有工作區時啟動速度都遠快于打開物聯網工作區。概述擴展可以讓用戶在VS Code中向開發工作流程添加新的語言、調試器和工具。VS Code提供了豐富的可擴展模塊，允許擴展訪問用戶界面、提供擴展功...

xiaolinbang 2019-08-26 13:47 評論0 收藏0
架構師之路

摘要：因為用戶不用在第一次進入應用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

NikoManiac 2019-08-22 11:22 評論0 收藏0