首页 > 编程语言> 文章详细

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

2019-10-04 06:34:39 阅读：217 来源： 互联网

标签：javascript gulp browserify commonjs

这是事情,

我来自一个网页中包含多个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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