浏览器化以缩小和连接文件

Browserify to minify and concat files

本文关键字：连接 文件 缩小 浏览器      更新时间：2023-09-26

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

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

我想尝试browserify但我被困在两件事上

  1. 使用浏览器时需要module.exports吗？将我的网络应用程序视为非常基本的。它需要jQuery，bootstrap和我自己的库。没有什么比必须以正确的顺序包含文件的复杂性所包含的了
  2. 为什么当我尝试将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 个文件喷出到 stdout 中。我正在尝试复制运行 browserify -g uglifyify app.js > bundle.js 时会发生什么 ->这从 app 中获取所有 requires（.js 并将其捆绑到一个新文件中。

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

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

相关文章：