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

Question

我有以下目录结构：

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

我使用lerna链接app component-library 。

在那一刻，我链接到component-library的编译输出。

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

我需要使用gulp吗？

Answer 1

我们使用纱线工作区而不是lerna，但它基本上是相同的东西（默认情况下来自lerna的--hoist选项）。

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

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

我需要使用gulp吗？

您需要一些实用程序来监视component-library文件更改，而不一定是gulp，但您可以。 当component-library的文件发生更改时，您需要重新运行prepare脚本以便重新发布包，因此webpack会注意到其依赖关系图中的模块已更改并将重建根application （可能会根据您的需要重新启动浏览器重新加载）开发设置）。 注意，仅仅在没有重建/发布的情况下观看component-library文件是不够的，因为webpack在其依赖图中构建了component-library ，而不是开发源代码。

如果你想使用gulp，watch任务可能看起来像这样：

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 。