事情是这样的
我来自一个网页中包含多个 js 文件的世界。 有些总是包含在页面中(您的库、菜单等...)和其他取决于当前页面(用于登录页面的 js、用于订阅的 js 等。 ..). 基本上假设我有每页 1 个不同的 js 文件加上库。
现在我想用 browserify 开始一个新项目,我遇到了一个大问题:
- 在我见过的所有示例中,总是一个入口点(如 app.js)。
- 在我的例子中,我将有 n 个入口点(每页 1 个)。
所以我的问题是:
- 每页有 1 个入口点是否违反良好做法?为什么 ?
- 如果是,浏览具有大量页面特定 JS 的大型应用程序的最佳做法是什么?
- 如果否,如何使用 Gulp 将其自动化。在我发现的每个例子中。您必须知道每个文件的名称并一个接一个地处理它。 (例如,这在具有数百页的大型项目中非常烦人)
- 您在项目中如何处理这个问题?我是否必须完全重新考虑我处理页面特定 JS 代码的方式?
最佳答案
这取决于您的具体情况。 Browserify 通常用于单页应用程序,其中单个 bundle 通常是最佳解决方案。您在非单页应用程序中使用它。
我看到两个选择:
将所有内容捆绑在一起。如果你有一个相对较小的应用程序,这将是最简单也可能是最有效的解决方案(因为浏览器缓存)。只需将所有页面特定模块与其他模块一起包含在内即可。
创建单独的包。您可以为每个页面创建一个包,或者为相关页面组创建一个包。 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)包。
关于javascript - Browserify 在大型 Web 项目中的最佳实践 - Gulp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26861340/