在大型网络项目中实现Browserify的实践--Gulp

Question

这是事情,

我来自一个网页中包含多个js文件的世界.有些总是包含在页面中(您的库,菜单等...),其他则取决于当前页面(登录页面的js,订阅的js等).基本上让我们说每页有1个不同的js文件加上libs.

现在我想用browserify开始一个新项目,我面临一个大问题:

• 在我看到的所有示例中,总有一个入口点(如app.js).
• 在我的情况下,我将有n个入口点(每页1个).

所以我的问题是:

• 每页有1个入口点是否违反良好做法？为什么？
  • 如果是,那么使用大量特定于页面的JS浏览大型应用程序的良好做法是什么？
  • 如果否,如何使用Gulp实现自动化.在我发现的每个例子中.您必须知道每个文件的名称并一个接一个地处理它.(例如,在一个包含数百页的大型项目中,这非常烦人)
• 你在项目中如何处理这个问题？我是否必须完全重新思考处理特定于页面的JS代码的方式？

Answer 1

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

我看到两个选择：

1. 将所有东西捆绑在一起。如果您的应用程序相对较小，那么这将是最简单且可能是最有效的解决方案（由于浏览器缓存）。只需包括您所有页面特定的模块以及其他模块即可。

2. 创建单独的捆绑包。您可以为每个页面创建一个包，或为一组相关页面创建一个包。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;
});

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