观察使用 webpack 构建的 npm 链接包的变化

Question

我的目录结构如下：

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

我已经使用lerna 将component-library 链接到app。

此时我正在链接到 component-library 的编译输出。

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

我需要使用 gulp 吗？

Answer 1

我们使用 yarn 工作空间而不是 lerna，但它本质上是一样的（默认情况下来自 lerna 的--hoist 选项）。

我将假设您在开发期间从 application 的根目录启动 webpack，并将 watch 选项设置为 true（或正在使用 webpack-dev-server），您有一个 prepare script在 component-library 的 package.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。