javascript – 在大型Web项目中完成Browserify的练习–Gulp

这是事情,

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

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

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

所以我的问题是：

>每页有1个入口点是否违反良好做法？为什么？

>如果是,那么使用大量特定于页面的JS浏览大型应用程序的良好做法是什么？
>如果否,如何使用Gulp实现自动化.在我找到的每个例子中.您必须知道每个文件的名称并一个接一个地处理它. (例如,在一个包含数百页的大型项目中,这非常烦人)

>您在项目中如何处理这个问题？我是否必须完全重新思考处理特定于页面的JS代码的方式？

解决方法:

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

我看到两个选择：

>将所有东西捆绑在一起.如果你有一个相对较小的应用程序,这将是最简单,也许是最有效的解决方案(因为浏览器缓存).只需包含您的所有页面特定模块以及其他模块.
>创建单独的包.您可以为每个页面创建一个包,也可以为相关页面组创建一个包. 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;
});

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

标签：javascript,gulp,browserify,commonjs
来源： https://codeday.me/bug/20191004/1852167.html