使用 NPM 和 Watchify 编译多个脚本包

Question

我有一个项目，我想在其中编译单独的脚本包 - 一个主要脚本包包含在每个页面上，而一堆单独的脚本包仅包含在特定页面上。

我有一个如下所示的 NPM 脚本：

"build-site": "watchify Scripts/site.js -o Scripts/bundle.js -v -d .",
"build-student": "watchify Scripts/modules/student.js -o Scripts/student_bundle.js -v -d .",
"start": "npm run build-site | npm run build-student",

所以我运行 npm start 和 Watchify 启动并开始监视文件。这部分工作得很好。

每当我对学生模块进行更改时，两个文件都会重新编译（没问题），但是当我在浏览器中查看页面时，我会收到错误消息，指出找不到模块 'site.js' .

如果我随后转到 site.js 文件并修改某些内容，则会发生重新编译，但这次它在浏览器中运行良好。

所以问题的症结在于，当我尝试编译一个文件时，我必须对另一个文件进行更改以使其也能正确编译。我觉得我这样做的方式有点不稳定，但我找不到太多关于使用 Watchify 捆绑多个文件的信息。

总结我的问题：如何使用 Watchify 编译多个包以避免上述问题？

Answer 1

我没有足够的代表发表评论，所以我会 post 在这里。

您没有添加目录结构。

应该是

"build-site": "watchify Scripts/modules/site.js -o Scripts/bundle.js -v -d ."

将 site.js 路径从 Scripts/file 更改为 Scripts/module/file

不能确定，我看不到目录布局。

Answer 2

这个问题似乎是一个很简单的问题。我试图编译的文件之一实际上包含在另一个文件中。

我怀疑发生的事情是 site.js 被 npm 编译和锁定，然后 student.js 的编译在 site.js 准备就绪之前启动。

我通过删除冗余而不是自己编译 site.js 来解决这个问题。它现在被 student.js 包含，我只是在页面上包含 student_bundle.js 而不是 site.js 和 student_bundle.js.

使用 NPM 和 Watchify 编译多个脚本包

Compiling multiple script bundles using NPM and Watchify

javascript

npm

watchify