Question

我有以下目录结构：

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

我已使用lerna关联component-library中的app。

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

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

我需要使用gulp吗？

Answer 1

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

我将假设您从application的根目录启动webpack，watch选项设置为true（或正在使用webpack-dev-server）在开发期间，您在component-library的package.json中进行prepare script设置以进行发布，并且app将component-library中的模块列为其包中的依赖项.json（即在导入期间不使用相对路径/需要来自component-library的模块）。

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

我需要使用gulp吗？

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

如果您想使用gulp，监视任务可能如下所示：

component-library

由于lerna符号链接，webpack＆＃39; 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; });选项可以看到模块已更改，并将重建根watch。

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

1 个答案: