2

我有以下目录结构：

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

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

此刻，我正在链接到component-library.

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

我需要使用 gulp 吗？

4

1 回答 1

5

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

我将假设您在开发过程中从根目录启动 webpack，application选项watch设置为true（或正在使用webpack-dev-server），您在 package.json 中有一个准备脚本设置component-library用于发布，并且app列出了来自component-library的模块package.json 中的依赖项（即在 import/require 的模块时不使用相对路径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。

于 2017-10-14T19:48:30.857 回答