手錶在NPM鏈路包變更建設得到的WebPack

Question

我有以下目錄結構：

application 
      | 
      |__ component-library 
      | 
      |__src 
      | 
      |__ app 
      | 
      |__src 

我用lerna在app鏈接component-library。

當時我鏈接到編碼輸出component-library。

我想以某種方式監聽組件庫文件夾中將導致重新編譯的更改。

我需要使用gulp嗎？

Answer 1

我們使用紗線工作區而不是lerna，但它基本上是相同的東西（默認情況下，來自lerna的--hoist選項）。

我會假設你是從application與watch選項設置爲true根開始的WebPack（或正在使用webpack-dev-server）在開發過程中，你必須在component-library的一個的package.json設置prepare script爲發佈，並且app列出component-library中的模塊作爲其package.json中的依賴關係（即在導入期間不使用相對路徑/需要來自component-library的模塊）。

我想以某種方式偵聽組件庫文件夾 中的更改，這會導致重新編譯。

我需要使用gulp嗎？

您需要一些實用程序來觀察component-library中的文件更改，但不一定是吞嚥，但可以。當component-library中的文件發生更改時，您需要重新運行prepare腳本，以便重新發布軟件包，因此webpack會注意到其依賴關係圖中的某個模塊已更改，並且會重建根application（可能會根據您的開發設置踢出瀏覽器重新加載）。請注意，僅在component-library中觀看文件而不重建/發佈是不夠的，因爲webpack在其依賴關係圖中構建了component-library，而不是開發源代碼。

如果你想使用吞掉一隻手錶任務可能是這個樣子：

import gulp from 'gulp'; 
import { spawn } from 'child_process'; 

gulp.watch('path/to/component-library/src/*.js',() => { 
    let prepare = spawn('yarn', ['run', 'prepare'], { 
     cwd: 'path/to/component-library', 
     stdio: 'inherit' 
    }); 

    prepare.on('exit', (code) => { 
     if (code !== 0) { 
      prepare.emit('end'); 
     } 
    }); 

    // gulp 4 allows returning a child process to signal async completion 
    return prepare; 
}); 

由於勒拿湖符號鏈接的WebPack的watch選項可以看到改變一個模塊，並重建根application。