观察使用 webpack 构建的 npm 链接包中的更改

Question

我有以下目录结构：

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

我使用 lerna 在app中链接component-library。

目前，我正在链接到component-library的编译输出。

我想以某种方式侦听组件库文件夹中的更改，这将导致重新编译。

我需要用咕噜咕噜吗？

Answer 1

我们使用 yarn 工作区而不是 lerna，但它本质上是相同的(默认情况下是 lerna--hoist选项)。

我将假设您从application的根目录启动 webpack，watch选项在开发过程中设置为true(或使用webpack-dev-server)，您在component-library的 package.json 中有一个准备脚本设置用于发布，并且app将component-library中的模块列为其 package.json 中的依赖项(即在从component-library导入/要求模块期间不使用相对路径)。

我想以某种方式侦听组件库文件夹中的更改 这将导致重新编译。

我需要用咕噜咕噜吗？

您需要一些实用程序来监视component-library中的文件更改，不一定是gulp，但您可以。当component-library中的文件发生更改时，您可能希望重新运行prepare脚本，以便它重新发布包，这样webpack会注意到其依赖项图中的模块发生了变化，并会重建根application(根据您的开发设置，可能会启动浏览器重新加载)。请注意，仅仅监视component-library中的文件而不重新构建/发布是不够的，因为 webpack 在其依赖关系图中构建了component-library，而不是开发源代码。

如果你想使用 gulp，一个监视任务可能看起来像这样：

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;
});

由于 lerna 符号链接 webpack 的watch选项可以看到模块已更改，并将重建根application。