手表在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。