這篇文章主要介紹了跑npm scripts的方式是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇跑npm scripts的方式是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)當(dāng)陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

每個(gè)前端項(xiàng)目都有 npm scripts，我們會(huì)用 npm scripts 來(lái)組織編譯、打包、lint 等任務(wù)。

這些命令行工具的 package.json 里都會(huì)有個(gè) bin 字段，來(lái)聲明有哪些命令：

npm install 這個(gè)包以后，就會(huì)放到 node_modules/.bin 目錄下：

這樣我們就可以通過(guò) node ./node_modules/.bin/xx 來(lái)跑不同的工具了。

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

當(dāng)然，最常用的還是放到 npm scripts 里：

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

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

也就是可以這樣跑：

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

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

其實(shí)還有更簡(jiǎn)單的方式，VSCode Debugger 對(duì) npm scripts 調(diào)試的場(chǎng)景做了封裝，可以直接選擇 npm 類(lèi)型的調(diào)試配置：

直接指定運(yùn)行的命令即可：

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

先去 node_modules/.bin 下這個(gè)文件里打個(gè)斷點(diǎn)：

然后點(diǎn)擊 debug 啟動(dòng)：

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

我們?cè)偃?start 下打個(gè)斷點(diǎn)：

代碼執(zhí)行到這里斷?。?/p>

這個(gè) config 就是 webpack 的配置：

再往下走，會(huì)發(fā)現(xiàn)啟動(dòng)了一個(gè) server：

我們?cè)?server 啟動(dòng)的回調(diào)函數(shù)里打個(gè)斷點(diǎn)，看看瀏覽器是怎么打開(kāi)的：

點(diǎn)擊 step into 進(jìn)入這個(gè)斷點(diǎn)，然后單步執(zhí)行，會(huì)走到這樣的代碼：

依次通過(guò) osascript 來(lái)啟動(dòng)這些瀏覽器，啟動(dòng)失敗的話，try catch 里直接忽略了：

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

釋放斷點(diǎn)，你就會(huì)發(fā)現(xiàn)瀏覽器打開(kāi)了

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

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

• 根據(jù)輸入的 start 命令，執(zhí)行 scripts/start 模塊

• 根據(jù)配置，創(chuàng)建 webpack 的 Compiler 對(duì)象

• 創(chuàng)建 WebpackDevServer

• server 啟動(dòng)之后，啟動(dòng)瀏覽器打開(kāi) url

• 打開(kāi) url 的實(shí)現(xiàn)就是通過(guò) osascripts 依次嘗試那些瀏覽器

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

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

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

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

但這個(gè)也可以改：

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

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

我們?cè)賮?lái)看個(gè)例子，比如 vue cli 創(chuàng)建的 vue 項(xiàng)目，在 vue.config.js 里可以改 webpack 配置：

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

console.log 打印大對(duì)象可不是個(gè)好主意，它是這樣的：

有的同學(xué)說(shuō)用 JSON.stringify，那個(gè)更難看，特別長(zhǎng)的一串。

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

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

然后打個(gè)斷點(diǎn)，debug 來(lái)跑：

關(guān)于“跑npm scripts的方式是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“跑npm scripts的方式是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：跑npmscripts的方式是什么
文章起源：http://jinyejixie.com/article6/podiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App設(shè)計(jì)、、電子商務(wù)、面包屑導(dǎo)航、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)