一、 調(diào)試簡單的腳手架方式

假定腳手架名稱是 xxx

1 ）方式1

• 在xxx腳手架項目目錄的上一級，執(zhí)行 npm i -g xxx
• 這時候，就可以本地調(diào)試腳手架，在前文中已經(jīng)說明軟鏈的作用
• 參考：https://blog.csdn.net/Tyro_java/article/details/136102674
• 這種方式，可以用到已經(jīng)發(fā)版上線的腳手架項目中

2 ）方式2

• 在未發(fā)過版的腳手架項目的根目錄中，也就是 xxx/ 下執(zhí)行 $ npm link 也可以調(diào)試本地腳手架
• 這時候，在當(dāng)前命令的日志輸出中，就會出現(xiàn)兩個軟鏈
  • 將當(dāng)前使用的node目錄下的 bin/xxx -> 當(dāng)前node所使用的node_modules中的 xxx/bin/index.js
    • 注意，這個要確保package.json 中配置的 bin 屬性是 bin/index.js
  • 再將當(dāng)前node所使用的node_modules中的 xxx -> 當(dāng)前腳手架的項目目錄 xxx
  • 注意 -> 表示軟鏈的意思
• 通過以上兩次軟鏈，就可以直接調(diào)試當(dāng)前腳手架項目，做到隨時修改，隨時使用

二、調(diào)試含有分包的腳手架項目

• 假設(shè)有兩個平行的項目 x1 和 x2，在x1中需要引入x2包

• x1的目錄結(jié)構(gòu)

  x1
  ├── package.json
  ├── bin└── index.js
  

  • 在package.json 中的 main 屬性配置為 bin/index.js

• x2的目錄結(jié)構(gòu)

  x2
  ├── package.json
  ├── lib└── index.js
  

  • 在這里的 lib/index.js中有一個方法

    module.exports = {sum (a, b) {return a + b}
    }
    

  • 在 package.json 中的配置
    • version 配置為 1.0.0
    • main 配置為 lib/index.js (注意，這個是x1引用x2的關(guān)鍵)

• 如果想要在 x1 中自動連接 x2，嘗試

  • 在x1目錄的上一級目錄執(zhí)行 $ npm link x2
  • 這種方式，顯然是失敗的
  • 因?yàn)?x2 包還沒有發(fā)布到 npm 上面

• 再次嘗試，首先在 x2 中執(zhí)行 $ npm link

  • 讓這個包在全局的 node_modules 目錄中創(chuàng)建一個軟鏈到當(dāng)前開發(fā)項目 x2 的目錄上
  • 這時候，全局環(huán)境下的 node_modules 下就可以找到 x2 了
  • 再次回到 x1 根目錄 x1/ 下執(zhí)行 $ npm link x2

• 到這個時候，環(huán)境基本已準(zhǔn)備好了，可以在x1中正常引入x2了，在x1中的 package.json 中

  {"dependencies": {"x2": "^1.0.0"}
  }
  

• 回到 x1 中，進(jìn)入 bin/index.js 編寫

  #!/usr/bin/env nodeconst lib = require('x2');
  const { sum } = lib;
  const result = sum(1 + 2)console.log('result: ', result)
  

  • 驗(yàn)證，在 x1/ 下執(zhí)行 $ node bin/index.js
    • 輸出 result: 3
  • 或者執(zhí)行 $ x1 來驗(yàn)證

• 使用這種方式，基于 x1 來調(diào)試 x2，調(diào)試完成 x2 就可以準(zhǔn)備上線了

• 上線完成后，x1 就可以重新下載 x2 作為依賴了，但是這個時候，可能會出現(xiàn)一些問題

  • 如果直接在 x1/ 下執(zhí)行 $ npm i 這時候下載的 x2 會被下載到 全局 node_modules 目錄下
  • 而項目本地的node_modules 沒有寫的權(quán)限
  • 因?yàn)橹按嬖?link 的行為，而 link 后會在全局 node_modules 下創(chuàng)建軟鏈
  • 這時候，需要執(zhí)行
    • $ npm unlink x2
      • 注意這里，如果失敗的話，嘗試: 先執(zhí)行一次 link x2, 之后再重新 unlink x2
    • $ npm remove -g x2
    • $ npm i x2 -S

• 注意，以上的方式，不修改項目源碼，而是修改本地環(huán)境，不會因?yàn)楹笃谕浶薷幕貋砘蛘`操作引發(fā)bug

• 修改源碼的方式

  • 之前會用 npm 安裝本地包，之后 dependencies 中，出現(xiàn) "bar": "file:foo/bar" 這類的形式
  • 這種，會導(dǎo)致后期上線非常的不方便，而且不注意就會引發(fā)問題

• 這種不修改源碼(包括package中的配置)而修改本地環(huán)境的方式，可以作為一種最佳實(shí)踐方式