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