Browserify 缩小和合并文件

Posted 2023-02-23

【中文标题】Browserify 缩小和合并文件

【英文标题】：Browserify to minify and concat files

【发布时间】：2016-03-14 16:54:25

【问题描述】：

我有一个纯粹基于 Web 的应用程序（即没有 Node 服务器），我希望能够为 Web 应用程序的每个页面捆绑我的所有 JS 文件和 CSS 文件。

我使用 Gulp 简单地将我的 JS 和 CSS 文件压缩并合并到一个包中，但发现我提供文件的顺序随后被随机喷出（如果你问我，这是不可接受的......）。我尝试了gulp-order 和其他流排序模块，结果更随机。

我想试试browserify，但我被两件事困住了

使用browserify时需要module.exports吗？将我的 Web 应用程序视为非常基础的应用程序。它需要 jQuery、引导程序和我自己的库。没有什么比必须以正确的顺序包含文件的复杂性更重要了 为什么当我尝试将browserify 用于构建文件而不是命令行时，它似乎会尝试捆绑它需要的每一个东西？我只想将我的app.js 有require() 的东西捆绑到

例如。

var browserify = require('browserify');
var fs = require('fs');
var b = browserify();
b.add('./app.js');
b.transform(
    global: true
, 'uglifyify');

b.bundle()
    .pipe(fs.createWriteStream('./bundle.js'));

当我运行browserify build.js 时，它可能会向标准输出中输出 100 个文件。我正在尝试复制运行 browserify -g uglifyify app.js > bundle.js 时发生的情况 -> 这会从 app.js 获取所有 requires() 并将其捆绑到一个新文件中。

【参考方案1】：

如果您希望能够require 在应用程序的其他部分中使用您的模块/代码，则需要使用module.exports。否则你不需要导出任何东西。

Browserify 仅捆绑所需的依赖项，但它也以递归方式执行此操作，这意味着如果您的应用程序需要库 a 并且库 a 需要库 b，那么 browserify 将捆绑您的代码、库 a 和库 b。

【讨论】：

我可以运行这个 cmd browserify -g uglifyify app.js > bundle.js 并得到我想要的：app.js 以及它 require()s 的所有内容，仅此而已。我希望在文件中做到这一点。我也不再使用 gulp 了。

是的，现在的问题是——简单地说——browserify 命令只是返回一个字符串。在您的命令 (browserify -g uglifyify app.js > bundle.js) 中，您将browserify 命令的输出通过管道传送到文件bundle.js。我使用 gulp 在答案中给出的示例完全相同。在我的示例中，b.bundle() 仅返回一个字符串，并且为了让 gulp 能够将其存储到文件 (bundle.js)，您需要使用 (source('bundle.js')) 将 b.bundle() 的输出重定向到名为bundle.js 的文件。或者我可能误解了你的问题。

您能否澄清一下“在文件中执行该操作（捆绑？）”的意思？

当我使用 gulp 时，我可以编写一个 gulpfile.js 来处理许多 gulp tasks。我假设（可能是错误的）我可以对browerify 做同样的事情。我的所有网页都使用 IE，而不是运行 browserify -g uglifyify webpage1.js > webpage1.min.js，我可以将所有这些命令放在一个文件中，并且只构建一次。

我想我还是放弃回去gulp，然后手动整理一下它毫无意义的concat顺序。