資訊專欄INFORMATION COLUMN
摘要：有限制就不靈活了，看源碼文件，兩百多個源碼文件都是語法，文件名稱是，想在中直接啟動調(diào)式是不行的，還是需要用到才行。使用環(huán)境調(diào)式使得效率更高，直接再中閱讀源碼，直接調(diào)式看效果。
文章首發(fā)：https://github.com/giscafer/g...
前言node.js在 v8.5 版本之后可以直接支持ES6模塊，但是有個限制就是，需要為.mjs后綴的文件才行，比如有個es6代碼文件為test.mjs，可以直接用node.js運行調(diào)式： node --experimental-modules test.mjs。
有限制就不靈活了，看lodash源碼文件，兩百多個源碼文件都是ES6語法，文件名稱是.js，想在VS Code中直接node啟動調(diào)式是不行的，還是需要用到babel才行。
下邊介紹VS Code 如何配置 webpack+babel 調(diào)式es6代碼的環(huán)境
第三方模塊環(huán)境準備工作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 會自動創(chuàng)建launch.json默認配置，我們做調(diào)整修改就行
{
"version": "0.2.0",
// 多個獨立的配置項
"configurations": [
{
// 語言
"type": "node",
// 是調(diào)試模式，還是附著到已運行的程序上
"request": "launch",
// 該配置項的名字
"name": "Launch Program",
// 程序的絕對路徑
"program": "${workspaceFolder}/test/index.js",
// 調(diào)試之前要做的任務(wù)名
"preLaunchTask": "build",
// SourceMap
"sourceMaps": true,
// 是否自動停止程序
"stopOnEntry": false,
// 生成的代碼中，如果無法映射回源代碼，則自動單步執(zhí)行。
"smartStep": true,
// 編譯后的文件地址
"outFiles": [
"${workspaceRoot}/dist/**"
]
}
]
}
然后創(chuàng)建任務(wù) task.json，步驟：任務(wù)菜單——配置任務(wù)
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "build", // 這里是任務(wù)名稱，對應(yīng)launch.json中的preLaunchTask屬性配置
"type": "npm",
"script": "build",
"problemMatcher": []
}
]
}
調(diào)式測試
完成上邊的步驟后，就結(jié)束了，在你配置的對應(yīng)webpack entry文件入口，寫ES6代碼后，打斷點，按下F5即可看到斷點調(diào)式效果。
比如我的test/index.js文件代碼如下，引入的是lodash的add.js源碼
import add from "../add.js"; console.log(add(1,2));
在add.js里邊依賴的模塊baseGetTag斷點調(diào)式截圖：
總結(jié)不管什么框架還是庫的源碼，我們閱讀源碼的時候，為了更容易理解代碼邏輯，肯定是需要源碼調(diào)式的分析。使用nodejs環(huán)境調(diào)式使得效率更高，直接再IDE中閱讀源碼，直接調(diào)式看效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90486.html
摘要：而一個哈希字符串就是根據(jù)文件內(nèi)容產(chǎn)生的簽名，每當(dāng)文件內(nèi)容發(fā)生更改時，哈希串也就發(fā)生了更改，文件名也就隨之更改。很顯然這不是我們需要的，如果文件內(nèi)容發(fā)生了更改，的打包文件的哈希應(yīng)該發(fā)生變化，但是不應(yīng)該。前言 隨著前端代碼需要處理的業(yè)務(wù)越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調(diào)式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的時間和帶寬...
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：例如允許我們在打包時將腳本分塊利用瀏覽器緩存我們能夠有的放矢的加載資源。文章的內(nèi)容大體分為兩個方面，一方面在思路制定模塊分離的策略，另一方面從技術(shù)上對方案進行落地。我之前提到測試之下是什么樣具體的場景并不重要。前言 隨著前端代碼需要處理的業(yè)務(wù)越來越繁重，我們不得不面臨的一個問題是前端的代碼體積也變得越來越龐大。這造成無論是在調(diào)式還是在上線時都需要花長時間等待編譯完成，并且用戶也不得不花額外的...
摘要：同時它又需要監(jiān)聽事件，當(dāng)物聯(lián)網(wǎng)設(shè)備插入計算機后做出響應(yīng)。比如以熱啟動打開物聯(lián)網(wǎng)項目工作區(qū)的啟動時間在表中是毫秒，但是正在運行的擴展頁面中大約是毫秒。當(dāng)在中應(yīng)用懶加載時，無論是否使用打包模塊，沒有工作區(qū)時啟動速度都遠快于打開物聯(lián)網(wǎng)工作區(qū)。 概述 擴展可以讓用戶在VS Code中向開發(fā)工作流程添加新的語言、調(diào)試器和工具。VS Code提供了豐富的可擴展模塊，允許擴展訪問用戶界面、提供擴展功...
摘要：因為用戶不用在第一次進入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
閱讀 3553·2019-08-30 12:58
閱讀 932·2019-08-29 16:37
閱讀 2807·2019-08-29 16:29
閱讀 3111·2019-08-26 12:18
閱讀 2376·2019-08-26 11:59
閱讀 3419·2019-08-23 18:27
閱讀 2794·2019-08-23 16:43
閱讀 3308·2019-08-23 15:23
