問題描述

事情是這樣的，

我來自一個網頁中包含幾個 js 文件的世界.有些總是包含在頁面中(您的庫、菜單等...)，其他則取決于當前頁面(用于登錄頁面的 js，用于訂閱的 js 等...).基本上假設我有 每頁 1 個不同的 js 文件加上庫.

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.

現在我想用 browserify 開始一個新項目，但我遇到了一個大問題:

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

• 在我看到的所有示例中，總是有一個入口點(如 app.js).
• 就我而言，我會有 n 個入口點(每頁 1 個).

• 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).

所以我的問題是:

• 每頁有 1 個入口點是否違反良好做法?為什么 ?
  • 如果是，對于具有大量頁面特定 JS 的大型應用程序進行瀏覽化的良好做法是什么?
  • 如果否，如何使用 Gulp 實現自動化.在我發現的每個例子中.您必須知道每個文件的名稱并一個接一個地處理它.(這在一個有數百頁的大型項目中非常煩人)
  • 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)

    推薦答案

    這取決于您的具體情況.Browserify 通常用于單頁應用程序，其中單個捆綁包通常是最佳解決方案.您在非單頁應用程序中使用它.

    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.

    我看到兩個選擇:

    1. 將所有內容捆綁在一起.如果您有一個相對較小的應用程序，這將是最簡單且可能是最有效的解決方案(因為瀏覽器緩存).只需將所有頁面特定模塊與其他模塊一起包含在內.

    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.

    創建單獨的捆綁包.您可以為每個頁面創建一個包，或為相關頁面組創建一個包.Browserify 將為每個包創建一個單獨的文件，您可以在每個頁面上單獨包含它們.

    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>
    

    您仍然可以跨模塊使用 require().

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

    您可以將每個頁面的 javascript 分離到一個單獨的目錄中，并使用它來自動化 gulp.使用 gulp 它可能看起來像:

    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.

    這篇關于大型 Web 項目中 Browserify 的最佳實踐 - Gulp的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

    【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！