每個前端項目都有 npm scripts，我們會用 npm scripts 來組織編譯、打包、lint 等任務(wù)。

大家可能經(jīng)常會跑 npm scripts，但卻對這些命令行工具是怎么實現(xiàn)的并不了解。

那如果想了解這些工具的實現(xiàn)原理，應(yīng)該怎么做呢？

這就是今天的主題：調(diào)試 npm scripts。

這些命令行工具的 package.json 里都會有個 bin 字段，來聲明有哪些命令：

npm install 這個包以后，就會放到 node_modules/.bin 目錄下：

這樣我們就可以通過 node ./node_modules/.bin/xx 來跑不同的工具了。

我們也可以用 npx 來跑，比如 npx xx，它的作用就是執(zhí)行 node_modules/.bin 下的本地命令，如果沒有的話會從 npm 下載然后執(zhí)行。

當然，最常用的還是放到 npm scripts 里：

這樣就直接 npm run xxx 跑就行了。

npm scripts 本質(zhì)上還是用 node 來跑這些 script 代碼，所以調(diào)試他們和調(diào)試其他 node 代碼沒啥區(qū)別。

也就是可以這樣跑：

在 .vscode/launch.json 的調(diào)試文件里，選擇 node 的 launch program：

用 node 執(zhí)行 node_modules/.bin 下的文件，傳入?yún)?shù)即可：

其實還有更簡單的方式，VSCode Debugger 對 npm scripts 調(diào)試的場景做了封裝，可以直接選擇 npm 類型的調(diào)試配置：

直接指定運行的命令即可：

比如我們就用這個 create-react-app 創(chuàng)建的 react 項目來嘗試下 npm scripts 的調(diào)試：

先去 node_modules/.bin 下這個文件里打個斷點：

然后點擊 debug 啟動：

你會發(fā)現(xiàn)會執(zhí)行 scripts 下的 start 模塊：

我們再去 start 下打個斷點：

代碼執(zhí)行到這里斷住：

這個 config 就是 webpack 的配置：

再往下走，會發(fā)現(xiàn)啟動了一個 server：

我們在 server 啟動的回調(diào)函數(shù)里打個斷點，看看瀏覽器是怎么打開的：

點擊 step into 進入這個斷點：

然后單步執(zhí)行，會走到這樣的代碼：

依次通過 osascript 來啟動這些瀏覽器，啟動失敗的話，try catch 里直接忽略了：

這些瀏覽器 hover 上去就可以看到：

釋放斷點，你就會發(fā)現(xiàn)瀏覽器打開了：

這樣，我們不就梳理了一遍 react-scripts start 的流程么？

總結(jié)一下就是這樣的：

• 根據(jù)輸入的 start 命令，執(zhí)行 scripts/start 模塊
• 根據(jù)配置，創(chuàng)建 webpack 的 Compiler 對象
• 創(chuàng)建 WebpackDevServer
• server 啟動之后，啟動瀏覽器打開 url
• 打開 url 的實現(xiàn)就是通過 osascripts 依次嘗試那些瀏覽器

這樣調(diào)試完一遍，我們就對 npm run start 有了更深入的認識。

而且，調(diào)試的方式跑 script 和直接命令行 npm run start 沒啥區(qū)別。

要說區(qū)別，唯一的區(qū)別可能就是這個：

默認調(diào)試模式下，輸出的內(nèi)容會在 Debug Console 面板顯示：

但這個也可以改：

可以切換成 integratedTerminal，那就會輸出在 terminal 了：

這樣就和平時 npm run start 執(zhí)行沒了任何區(qū)別，而且還可以斷點調(diào)試，它不香么？

我們再來看個例子，比如 vue cli 創(chuàng)建的 vue 項目，在 vue.config.js 里可以改 webpack 配置：

但如果你想知道默認的配置是啥呢？console.log 么？

console.log 打印大對象可不是個好主意，它是這樣的：

有的同學(xué)說用 JSON.stringify，那個更難看，特別長的一串。

如果你會了調(diào)試 npm scripts 呢？

你就可以加一個 npm 類型的調(diào)試配置：

然后打個斷點，debug 來跑：

啥配置都能看到，這不香么？

我舉的例子只是 webpack 的，但其余的 npm scripts，比如 babel、tsc、eslint、vite 等等都是一樣的調(diào)試方式。

總結(jié)

每個項目都有 npm scripts，大多數(shù)人只是用它們而不會調(diào)試它們，所以就算每天用也不知道這些工具的原理。

這些命令行工具都是在 package.json 中聲明一個 bin 字段，然后 install 之后就會放到 node_modules/.bin 下。

可以 node node_modules/.bin/xx 來跑，可以 npx xx 來跑，最常用的還是 npm scripts，通過 npm run xx 來跑。

npm scripts 的調(diào)試就是 node 的調(diào)試，只不過 VSCode Debugger 做了簡化，可以直接創(chuàng)建 npm 類型的調(diào)試配置。

把 console 配置為 integratedTerminal 之后，日志會輸出到 terminal，和平時直接跑 npm run xx 就沒區(qū)別了。而且還可以斷點看看執(zhí)行邏輯。

跑 npm scripts 之余，還可以理一下它的實現(xiàn)邏輯，哪里感興趣斷在哪里，這不比直接跑香么？