如何使用 Browserify 和 Gulp 启动多页面应用程序

Posted 2023-02-19

【中文标题】如何使用 Browserify 和 Gulp 启动多页面应用程序

【英文标题】：How to boot a multi-page app with Browserify and Gulp

【发布时间】：2017-09-10 19:06:01

【问题描述】：

好的，我使用 Gulp 和 Browserify 构建的新 php/JS 应用程序即将完成。最后一部分是如何“启动”，我的意思是如何进行“第一次调用”。

假设我有 3 个 JS 入口点

/js/articles.js
/js/categories.js
/js/comments.js

他们每个人都使用一些 JS 模块。 然后我有 3 个 html 文件，需要他们的 JS

/articles.html
/categories.html
/comments.html

示例 /js/articles.js

var $ =                 require("jquery");
var common =            require("../common.js");

var viewModel = 

    readData: function() 
        /* read record from API and render */
    ,

    insert: function() 
        /* open a modal to insert new record */
    
;

我现在应该做的是执行这种“启动”：即调用一些我需要的初始化函数，然后加载服务器数据，然后将所有按钮和东西绑定到 viewModel 的方法

$(document).ready(function() 
    common.init();
    viewModel.readData();
    $('#btn-add').click(viewModel.insert);
);

好的，但是我该把它放在哪里呢？

A) 在 HTML 文件中？ 我不能因为我没有任何全局 JS 变量可以访问..

B) 我是否将其放入articles.js 中？ 目前，我的 Gulp 任务会将所有内容（articles.js、categories.js、cmets.js、公共库）捆绑到单个 bundle.js 中。 如果我将它放入articles.js，它将最终放入bundle.js。因此，与文章相关的引导内容也将在“类别”页面中调用。这是错误的。

C) 我是否应该将articles.js 拆分为2 个文件，一个包含viewModel 定义，另一个包含$(document).ready 的内容？...但我又该如何访问正确的viewModel？

哪个是正确的解决方案？

谢谢

【问题讨论】：

这个答案可能会有所帮助：***.com/a/23836379/2661028

【参考方案1】：

似乎您的 gulp 任务只会将所有条目连接到 bundle.js 中，因此您可能只需添加另一个名为 js/index.js 的条目并将初始化代码放入其中。

令人困惑的是，您的代码将被执行（基于您在 B 中的描述），即使您没有对其调用 require。你能提供你的 bundle.js 和你的一个 html 文件吗？