大型 Web 项目中 Browserify 的最佳实践 - Gulp答案

【问题标题】：Bests practice for Browserify in large web projects - Gulp大型 Web 项目中 Browserify 的最佳实践 - Gulp
【发布时间】：2015-01-07 19:00:42
【问题描述】：

事情是这样的，

我来自一个网页中包含几个 js 文件的世界。 有些总是包含在页面中（您的库、菜单等...），其他的则取决于当前页面（用于登录页面的 js，用于订阅的 js 等。 ..)。基本上假设我有 每页 1 个不同的 js 文件加上库。

现在我想用 browserify 开始一个新项目，但我遇到了一个大问题：

在我见过的所有示例中，总是有一个入口点（如 app.js）。
就我而言，我会有 n 个入口点（每页 1 个）。

所以我的问题是：

每页有 1 个入口点是否违反良好做法？为什么？
- 如果是，对于具有大量特定于页面的 JS 的大型应用程序进行浏览化的良好做法是什么？
- 如果否，如何使用 Gulp 实现自动化。在我发现的每个例子中。您必须知道每个文件的名称并一个接一个地处理它。（这在一个有数百页的大型项目中非常烦人）
您在项目中是如何处理这个问题的？我是否必须彻底重新考虑处理特定于页面的 JS 代码的方式？

【问题讨论】：

我很少有页面特定的 javascript，当我这样做时，该页面会获得一个额外的 js 文件。就这么简单。
我不在单页应用程序中，所以我对几乎每个 dom 加载事件都有一些特定的页面。如果你知道一种方法（模式、良好实践……）为多页面应用程序编写 90% 的通用 JS，我非常感兴趣！
主要思想是将所有页面共享的依赖关系捆绑到一个文件中，然后为每个页面创建一个单独的文件。这个想法的目标是最大化来自每个页面视图的浏览器缓存的代码量，同时最小化文件大小。如果每个页面都使用 jQuery，下面公认的解决方案将导致大量冗余代码。
您可能要求stealjs.com 我不喜欢这些文档，但 2 个项目示例非常简单，stealjs 刚刚在我的第一次尝试中工作！但是，我暂时不会使用它，因为捆绑工具不能很好地与 CDN 上的库配合使用（或者因为我没有弄清楚如何使它工作）

标签： javascript gulp browserify commonjs

【解决方案1】：

这取决于您的具体情况。 Browserify 通常用于单页应用程序，其中单个捆绑包通常是最佳解决方案。您在非单页应用程序中使用它。

我看到两个选择：

将所有内容捆绑在一起。如果您有一个相对较小的应用程序，这将是最简单且可能是最有效的解决方案（因为浏览器缓存）。只需将您的所有页面特定模块与其他模块一起包含在内。
创建单独的捆绑包。您可以为每个页面创建一个包，或者为相关页面组创建一个包。 Browserify 将为每个包创建一个单独的文件，您可以在每个页面上单独包含它们。

<script src="common-bundle.js"></script>
<script src="bundle-for-this-page.js"></script>

您仍然可以跨模块使用require()。

您可以将每个页面的 javascript 分离到一个单独的目录中，并使用它来自动化 gulp。使用 gulp 它可能看起来像：

var pageDirs = ['page1', 'page2'];

pageDirs.forEach(function(pageDir) {
    gulp.task('browserify-' + pageDir, function() {
        gulp.src(pageDir + '/index.js')
            .pipe(browserify())
            .on('prebundle', function(bundle) {
                bundle.external('./common-bundle');
            })
            .pipe(gulp.dest('./build/' + pageDir))
    });
});

gulp.task('browserify-all', pageDirs.map(function(pageDir) {
    return 'browserify-' + pageDir;
});

创建一个单独的任务来浏览你的公共包。

【讨论】：

你能解释一下on('prebundle',...)的作用吗？
@NicolasDurán 这是一个在与 browserify 捆绑之前触发的事件。它允许您访问内部 browserify 包并对其进行配置。请注意，示例已过时。 gulp-browserify 不再维护，您可能应该使用类似 vinyl-source-stream 的东西和原始的 browserify 包。

【解决方案2】：

感谢您的回答。它让我走上正轨。经过大量其他研究，我找到了我需要浏览多个入口点文件的确切脚本，而无需在每个入口点文件上手动调用它：

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var transform = require('vinyl-transform');

// BROWSERIFY
gulp.task('browserify', function(){
    var browserified = transform(function(filename) {
        var b = browserify(filename);
        b.transform(reactify);
        return b.bundle();
    });

    return gulp.src(JS_SRC)
        .pipe(browserified)
        //.pipe(uglify())
        .pipe(gulp.dest(JS_DEST))
        .pipe(notify({message: 'Browserify task completed.'}));
});

此脚本获取 JS_SRC 目录中的每个 js 文件，并假定它是 browserify 入口点。

这对我来说很好。

【讨论】：