Question

这就是事情，

我来自一个网页中包含多个js文件的世界。 页面中包含一些（您的图书馆，菜单等...），其他图书取决于当前页面（js表示登录页面，js表示订阅等） ..）。基本上我要说我每页 1个不同的js文件加上libs。

现在我想用browserify启动一个新项目，我面临一个大问题：

在我看到的所有示例中，总有单个入口点（如app.js）。
在我的情况下，我会有 n个入口点（每页1个）。

所以我的问题是：

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

Answer 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;
});

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

Answer 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入口点。

这对我来说很好。

在大型网络项目中浏览器化的最佳实践--Gulp

2 个答案: