观察正在使用 webpack 构建的 npm link 包中的变化

Question

我有以下目录结构：

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

我在app中使用了lerna到linkcomponent-library。

此刻我正在 link 查看 component-library 的编译输出。

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

我需要使用 gulp 吗？

Answer 1

我们使用 yarn workspaces 而不是 lerna，但本质上是一样的（--hoist 默认来自 lerna 的选项）。

我将假设您从 application 的根启动 webpack，并将 watch 选项设置为 true（或正在使用 webpack-dev-server）在开发期间，您在 component-library 的 package.json 中设置了 prepare script 用于发布，并且 app 将 component-library 中的模块列为其 [= 中的依赖项43=]（即在来自 component-library 的模块的 import/require 期间不使用相对路径）。

I want to somehow listen for changes in the component library folder which will cause a recompilation.

Would I need to use gulp?

您可能需要一些实用程序来监视 component-library 中的文件更改，不一定 gulp，但您可以。当来自 component-library 的文件发生更改时，您可能希望重新运行 prepare 脚本以便它重新发布包，于是 webpack 会注意到其依赖关系图中的模块发生更改并重建根 application（可能会根据您的开发设置启动浏览器重新加载）。请注意，在没有 rebuilding/publishing 的情况下仅查看 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 symlinks webpack 的 watch 选项可以看到更改的模块并将重建根目录 application.

观察正在使用 webpack 构建的 npm link 包中的变化

Watch for changes in an npm link package being built with webpack

javascript

webpack

gulp

lerna

monorepo