Bestrif在大型网站项目中的实践--Gulp [英] Bests practice for Browserify in large web projects - Gulp

问题描述

这是事情，

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

现在我想开始一个使用browserify的新项目和我面临的一个大问题： 在我看过的所有例子中，总是一个入口点（如app.js）。

在我的情况下，我会有 n个入口点

所以我的问题是：

• 每页有1个入口点是否违背良好做法？为什么？
  
  
  
  • 如果是，那么用大量页面特定的JS来浏览大型应用程序有什么好的做法？
  
  
  • 如果否，如何使用Gulp将其自动化。在我找到的每个例子中。您必须知道每个文件的名称并逐个处理它。 （这在一个大型项目中非常讨厌，例如数百页）
  
  


• 您在项目中如何处理这个问题？我必须完全重新思考我的方式来处理页面特定的JS代码吗？
这取决于你的具体情况。 Browserify通常用于单页应用程序，其中单个包通常是最佳解决方案。您在非单页应用程序中使用它。




我看到两种选择：






1. 将所有内容捆绑在一起。如果你有一个相对较小的应用程序，这将是最简单也是最有效的解决方案（因为浏览器缓存）。只需包含您的所有页面特定模块以及其他模块。

创建单独的捆绑包。您可以为每个页面创建一个包，或者为相关页面组创建一个包。 Browserify将为每个包创建一个单独的文件，您可以在每个页面上单独包含它们。







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

您仍然可以使用 require（）

  var pageDirs = ['page1'，'page2']; 
 
 pageDirs.forEach（function（pageDir）{
 gulp.task（'browserify-'+ pageDir，function（）{
 gulp.src（pageDir +'/ index。 （'./ common-bundle'）; $ b $（$） （gulp.dest（'./ build /'+ pageDir））
}）; 
}）; 
 $ b gulp.task（'browserify-all'，pageDirs.map（function（pageDir）{
 return'browserify-'+ pageDir; 
}）; 
  

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




Here is the thing,

I come from a world where you have several js files included to a web page. Some are always included in the page (your libs, menu etc...) and others are depending on the current page (js for login page, js for subscription etc...). Basically let's say that I have 1 different js file per page plus the libs.

Now I want to start a new project with browserify and I am in front of a big problem :

• In all the examples I have seen, there is always a single entry point (like app.js).
• In my case I would have n entry points (1 per page).

So my questions are:

• Is it against good practices to have 1 entry point per page ? Why ?
  • If Yes, What is the good practice for browserifying a large app with lot of page-specific JS ?
  • If No, How to automate that with Gulp. In every examples I found. You have to know the name of every files and process it one after another. (Which is very annoying in a large project with hundreds of pages for example)
• How are you dealing with this in your projects ? Do I have to completely rethink my way to deal with page-specific JS code ?

解决方案

It depends on your particular case. Browserify is often used for single page apps where a single bundle is often the best solution. You are using it in a non single-page application.

I see two choices:

1. Bundle everything together. If you have a relatively small app, this will be the easiest and maybe most efficient solution (because of browser caching). Just include all your page specific modules along with your other ones.

2. Create separate bundles. You could create a bundle for each page, or a bundle for groups of related pages. Browserify will create a separate file for each bundle and you can include them independently on each page.

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

You will still be able to use require() across modules.

You could separate each page's javascript into a separate directory and use that to automate gulp. With gulp it could look something like:

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

Create a separate task for browserifying your common bundle.

这篇关于Bestrif在大型网站项目中的实践--Gulp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！