注意使用 webpack 构建的 npm 链接包的变化

Question

我有以下目录结构：

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

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

目前，我正在链接到component-library.

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

我需要使用 gulp 吗？

Answer 1

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

我将假设您在开发期间从 的根目录启动 webpack application，并将watch选项设置为true（或正在使用webpack-dev-server），您在's package.json 中有一个准备脚本设置component-library用于发布，并且app列出了来自component-libraryas 的模块其 package.json 中的依赖项（即在导入/需要模块 from 期间不使用相对路径component-library）。

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

我需要使用 gulp 吗？

您需要一些实用程序来监视 中的文件更改component-library，不一定是 gulp，但您可以。当文件component-library发生更改时，您希望重新运行prepare脚本，以便它重新发布包，然后webpack会注意到其依赖关系图中的模块发生更改并重建根目录application（可能会根据您的开发设置启动浏览器重新加载）。请注意，在component-library不重新构建/发布的情况下简单地观察文件是不够的，因为 webpackcomponent-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选项可以看到一个模块已更改并将重建 root application。