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

【问题标题】：How to boot a multi-page app with Browserify and Gulp如何使用 Browserify 和 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？

哪个是正确的解决方案？

谢谢

【问题讨论】：

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

标签： javascript node.js gulp browserify node-modules

【解决方案1】：

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

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

【讨论】：