javascript - Browserify 在大型 Web 项目中的最佳实践 - Gulp

Question

事情是这样的

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

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

• 在我见过的所有示例中，总是一个入口点(如 app.js)。
• 在我的例子中，我将有 n 个入口点(每页 1 个)。

所以我的问题是:

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

Answer 1

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

我看到两个选择:

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

创建一个单独的任务来浏览您的公共(public)包。