成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺析webpack源碼之前言（一）

suosuopuo / 1592人閱讀

為什么讀webpack源碼

因?yàn)榍岸丝蚣茈x不開webpack，天天都在用的東西啊，怎能不研究

讀源碼能學(xué)到很多做項(xiàng)目看書學(xué)不到的東西，比如說(shuō)架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會(huì)潛移默化的影響等

想寫源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧

知道世界的廣闊，那么多插件，那么多軟件開發(fā)師，他們?cè)谧鍪裁?，同樣是寫js的，怎么他們能這么偉大

好奇心

本以為用框架以及用熟練后，到達(dá)了一個(gè)美麗的小湖泊，讀源碼發(fā)現(xiàn)原來(lái)還有一望無(wú)際的海洋，壯麗的雪山，浩淼的星辰。

讀webpack對(duì)面試也沒(méi)什么用（刷leetcode，面試題更有用），你說(shuō)你看webpack學(xué)會(huì)了啥，一時(shí)半會(huì)也說(shuō)不清楚，但就是想看，想就去做，只要不危害他人

為什么寫webpack源碼系列文章博客

我可以只讀不寫的，這樣還讀的更快，只是后面想起了，不知道讀了啥，讀vue的時(shí)候好多都沒(méi)有記錄，但是即便那樣當(dāng)我再次看到那個(gè)函數(shù)我知道那是做什么

給公司寫的項(xiàng)目代碼，如果項(xiàng)目被砍，感覺(jué)白寫了一樣

為了證明自己的存在，證明自己來(lái)過(guò)

如果通過(guò)看這個(gè)文章你能能學(xué)到絲毫的知識(shí)，是我之幸??

看這個(gè)你能學(xué)到什么

如果你想知道webpack的算法實(shí)現(xiàn)

我建議你看這個(gè)git地址

雖然寫的不夠好，但是已經(jīng)是我能找到的中寫的最好的


里面更多記錄了怎么跟蹤的過(guò)程

你能學(xué)到如何調(diào)試以及閱讀源碼

知道webpack頁(yè)面架構(gòu)

webpack哪些模塊實(shí)現(xiàn)了什么功能

如何讀webpack 準(zhǔn)備

自己用webpack搭建一個(gè)項(xiàng)目,甚至是現(xiàn)成的讀webpack都可以

當(dāng)你npm run build 發(fā)生了什么？


參考npm的run-script文檔

npm run會(huì)自動(dòng)添加node_module/.bin 到當(dāng)前命令所用的PATH變量中，
因此，npm run build 會(huì)執(zhí)行package.json配置的build，目前我配置的是webpack，
實(shí)際會(huì)調(diào)用 node_modules/.bin/webpack

打開項(xiàng)目找到node_modules/.bin/webpack，需要點(diǎn)耐心，需要翻很多
webpack是一個(gè)符號(hào)連接
指到了webpack/bin/webpack.js

log大法

第一行是

#!/usr/bin/env node

它被稱為 Shebang。

/usr/bin/env 不是一個(gè)路徑，而是一個(gè)命令，
后面跟node 參數(shù)，就會(huì)找到node并調(diào)用它。

$ /usr/bin/env node --version
v10.11.0

log 調(diào)試

顏色log DEGUB

用這個(gè)打印log會(huì)區(qū)分顏色，事實(shí)上我用著，也沒(méi)那么好用

順便講一下吧

安裝

npm i -D debug

在要調(diào)試的文件中
定義

const log = require("debug")("debug-webpack webpack webpack.js");
log("你想打印的")

請(qǐng)把react-beauty-highcharts替換成你的文件名，這樣才會(huì)有l(wèi)og

DEBUG=react-beauty-highcharts* npm run build

這個(gè)有個(gè)缺點(diǎn)就是如果json比較大，每一行都會(huì)打印一遍debug-webpack webpack webpack.js名字，不好復(fù)制,還是console.log() 好使

我們打開文件，里面主要處理了一些安裝的邏輯
沒(méi)安裝包報(bào)錯(cuò)之類的
找到

const cliPath = path.resolve(path.dirname(pkgPath), pkg.bin[installedClis[0].binName]);
// 引入了路徑看到打印了路徑是node_modules/webpack-cli/bin/cli.js
require(cliPath);

接下來(lái)打開webpack-cli/bin/cli.js

241行

let options;
try {
    options = require("./convert-argv")(argv);
} catch (err) {
    
}

我們分析convert-argv模塊
想有更好的視覺(jué)效果
傳送門vuepress 效果查看

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101202.html

相關(guān)文章

  • 淺析webpack源碼之processOptions處理Options以及入口函數(shù)（三）

    摘要：我們打開根據(jù)上次所返回的這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了大體邏輯是這樣的先定義一個(gè)空對(duì)象同上次的一個(gè)邏輯，還是一個(gè)目前的方式只有一個(gè)滿足如果滿足的會(huì)執(zhí)行一系列函數(shù)這個(gè)函數(shù)直接結(jié)果是的影響是打比如如果滿足的話當(dāng)你的時(shí)候就會(huì)在頁(yè)面上出 我們打開bin/cli.js根據(jù)上次所返回的Options processOptions(options)這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了,大體邏輯...

    doodlewind 評(píng)論0 收藏0

  • 淺析webpack源碼之convert-argv模塊（二）

    摘要：接下來(lái)我看看一下函數(shù)我們先按照分支走為讀取是里的對(duì)象，饒了這大的一個(gè)圈子，那么接下來(lái)一起來(lái)看一看對(duì)你的輸入配置做了怎么樣的處理吧 打開webpeck-cli下的convert-argv.js文件 // 定義options為空數(shù)組 const options = []; // webpack -d 檢查 -d指令 if (argv.d) { //... } ...

    lemon 評(píng)論0 收藏0

  • 淺析webpack源碼之WebpackOptionsApply 模塊(七)

    摘要：還做了處理，是之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個(gè)坑跳出來(lái)進(jìn)入這個(gè)大坑進(jìn)入這個(gè)頁(yè)面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好前面一大堆的引入，主要是下和文件夾下的模塊父類就只是定義了接口主要核心在方法 NodeEnvironmentPlugin還做了watch處理，NodeWatchFileSystem是webpack之所以能根據(jù)變化自己更新的核...

    AaronYuan 評(píng)論0 收藏0

  • 淺析webpack源碼之Compiler.js模塊(八)

    摘要：小尾巴最終返回了屬性掛載把引入的函數(shù)模塊全部暴露出來(lái)下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對(duì)象上的正題要想理解必須要理解再寫一遍地址我們先簡(jiǎn)單的理解它為一個(gè)通過(guò)注冊(cè)插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

    PumpkinDylan 評(píng)論0 收藏0

  • 淺析webpack源碼之NodeEnvironmentPlugin模塊總覽（六）

    摘要：進(jìn)入傳入地址出來(lái)一個(gè)復(fù)雜對(duì)象把掛載到對(duì)象上太復(fù)雜我們先看可以緩存輸入的文件系統(tǒng)輸入文件系統(tǒng)輸出文件系統(tǒng)，掛載到對(duì)象傳入輸入文件，監(jiān)視文件系統(tǒng)，掛載到對(duì)象添加事件流打開插件讀取目錄下文件對(duì)文件名進(jìn)行格式化異步讀取目錄下文件同步方法就 進(jìn)入webpack.js //傳入地址,new Compiler出來(lái)一個(gè)復(fù)雜對(duì)象 compiler = new Compiler(options.conte...

    ChristmasBoy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<