问题标签 [watchify]

我正在尝试通过 npm 安装 watchify 包，但我失败了。片刻之后，该命令将停止执行。关于如何解决这个问题的任何想法？谢谢

我最近开始在我的 gulp 构建中使用 watchify，但我不明白，为什么当出现问题时它不会在终端中引发错误。可能，我应该在某处添加类似的东西if(err) throw err，但我不明白到底在哪里。

此外，此代码假设进行某种热重载，但事实并非如此，它只是比不使用 watchify 构建得快得多，但无论如何它都会重新加载页面。

我的 gulp 文件似乎运行良好，当我对app.js文件或 sass 文件进行更改时，Watchify 正在工作。这是我运行gulp命令时发生的情况：

问题是，这些时间只在我第一次出现时才出现gulp。运行gulp命令后，当我对 JS 文件进行更改时，构建时间不会显示。它确实告诉我 sass 文件的构建时间，但不是我的 JS 的构建时间。正如我之前所说，Watchify 正在工作并且新的输出文件已创建，但我的终端中没有反馈告诉我花了多长时间。事实上，我的 JS 更改根本没有任何消息。

这是我的gulpfile。

我正在使用带有 gulp 的 browserify，但在加载模板时遇到问题。奇怪的是，据我所知，我的路径是正确的，但我的模板没有加载。

这是我的目录结构：

这是我的 app.js 文件：

r);

这是我的模板：

更新： 有人认为我应该用它module.exports = function () {}来让我的胡子库工作吗？是这样吗？但其他库（例如 jquery、mixitup）不需要这样做。所以我猜这是抓住稻草？

我刚开始使用browserify。当它工作时，它是辉煌的。但是require()......某些模块不起作用（默认情况下）。

我有这个代码：

在上面。jQuery 和 gsap 工作并被导入。但航点没有。当包含航点时，我收到错误：

这也发生在一些随机的其他模块上。

使用 npm 安装的所有模块。

使用此页面中的 browserify/watchify 配方： https ://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md

我尝试了一些受类似堆栈溢出问题启发的修复，但到目前为止还没有运气。

一些答案表明存在/曾经是 npm 的错误，这可能是负责任的。如果是这种情况，我能做些什么可靠的事情？

很高兴提供更多信息。

我正在尝试创建一个复合 gulp 任务，它同时运行 2 个单独的监视任务：

使用 gulp 实现以下目标的正确方法是什么？

例如，对于普通的 npm 任务，我会这样做：

我有一个依赖于 jQuery、React 和 SocketIO 的“中等”Typescript 应用程序（例如，不是微不足道的，但也不是企业级的，有数千行）——以及其他较小的库。

我当前的 gulpfile 是这样的：

一切都按预期工作，但是，使用 watch 任务时的构建时间需要很多秒。奇怪的是，我的任务报告脚本的重新编译发生在 500 毫秒以下（“时间”事件上的事件处理程序），但如果我在脑海中数数，它直到三到四秒后才完成.

请注意，在我粘贴现有的 TypeScript 代码之前，我正在快速加载/捆绑 jQuery、React、Moment 和其他我正在使用的库。因此，我认为使用单独的供应商捆绑包不会加快任何速度。此外，不写出源图似乎也不会影响性能。

在我切换到 browserify 之前，我使用 gulp-typescript 进行编译并使用 requirejs 进行模块加载。这些构建花了不到一秒钟的时间。然而，requirejs 因其他原因引起了问题——无论哪种方式，我都想从 AMD 转移到 CommonJS。

目前这不是一个大问题，但随着项目的发展，它肯定会导致我的开发流程出现问题。对于一个只有这么大的项目，处理更大的项目需要多长时间？

此外，它还会导致 Visual Studio 出现问题。这是一个 ASP.NET 5 应用程序，Visual Studio 显然坚持每次更改时都重新加载/重新解析捆绑的 JavaScript 文件，导致每次更改后 IDE 延迟 1-2 秒：在重新编译本身需要 3-4 秒。该脚本正在呈现到我的 wwwroot 文件夹，并且似乎无法使用 ASP.NET 5 工具“排除”脚本子文件夹。

我知道我在某处遗漏了一些东西。一个可能的问题是 tsify 没有使用 typescript 的“项目”功能来实现重新加载，导致 TypeScript 编译器为每次更改重新处理每个文件。

无论如何，我不可能是唯一一个在玩具项目之外使用这些工具的人，所以我在这里问是否有人有更好的解决方案；因为除了这个问题，一切都运作良好。

编辑 - - - - - - - - - - - - - - - -

好吧，我得吃我自己的话了。由于我将我的第三方库捆绑到他们自己的包中，构建时间缩短到大约一秒钟。这是我更新的 gulpfile（注意新的 dev.scripts.vendor 任务和 buildScripts 函数中的 .external 调用）

但是，我仍然遇到一个奇怪的问题。禁用源映射（现在似乎对速度有影响），我的 on("time", () => {}) 回调报告每次文件更改需要 60-80 毫秒，但它仍然挂起大约一秒钟. 一秒钟是我愿意等待的一切，所以我再次担心随着项目的发展，这种等待也会增加。

当事件报告的事情要小得多时，看看这额外的一秒钟时间花在了什么上会很有趣。也许我会开始深入研究源代码，因为似乎没有人立即给出答案。

另一个问题这只是一个旁注，但 debowerify 不再适用于此。使用 debowerify+bower 时，它将继续在最终输出中呈现所需的模块，即使该模块已列在“外部”列表中。因此，目前使用此设置，我只能使用 npm 模块，除非我可以为我的应用程序包添加更多编译时间。

另外，我了解到 debowerify 将覆盖 npm 模块，并且它基于 bower_components 的目录列表，而不是您的 bower 配置文件。我在 npm 中安装了 jQuery，并且只在 bower 中安装了引导程序；但是由于 bootstrap 将 jQuery 作为依赖项下拉，因此 bower jQuery 模块优先于 NPM jQuery 加载。只是给人们提个醒。

这是一个典型的工作流程：

1. 编辑 JS 文件
2. 保存文件，watchify 自动开始为我重建它
3. alt-tab 到浏览器
4. ctrl+R 重新加载页面

这很好，除非 watchify 比第 3 步和第 4 步花费更长的时间，否则这很糟糕，因为您要么得到过时的代码，要么得到错误。

有没有一种简单的方法可以保证永远不会发生？就像 watchify 向我的服务器发出信号的一种方式，它应该在尝试加载请求的页面之前再等待一秒钟？如果不存在这样的事情，那么人们在实践中如何处理这个问题？

我必须在谷歌搜索，因为我什至找不到人在谈论这个问题，除了这个说“添加一个简单的（基于节点的）服务器，它将阻止请求，直到手表完成运行：这将避免总是令人沮丧重新加载页面却发现手表还没有完全运行的现象。” - 但不幸的是，这是待办事项列表中的一个条目，而不是该回购中存在的东西。

我想避免使用 Gulp 或 Grunt（还有其他人厌倦了这些吗？）然后转身

进入

package.json使用可以放入文件的单行命令：

我一直在尝试使用 、 、 和 命令行 的变体babel，babelify但browserify无济于事watchify。这是我尝试过的示例：

...而且我尝试过许多其他变体。

更新 1：

快到了。

这有效，但它没有检测到对src/components/index.jsx.

更新 2：

如果我从包中排除（大）React 库，那么一切正常：

...这让我想知道是否有什么事情正在悄悄地出错，并且 watchify 正在破坏，如本 GitHub 问题中所述。

我希望我的 gulpfile.js 任务监视在更新路径中的 html 文件时运行，而不仅仅是 javascript 文件。似乎即使我的基本目录没有指定 *.js，它也是它所假设的。

我的 gulpfile.js 的相关部分如下。