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

Question

好的，我使用 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 */
    }
};

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

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

好的，但是我把这个放在哪里？

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

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

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

哪个是正确的解决方案？

谢谢

Answer 1

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

即使您没有调用 require ，您的代码也会被执行（根据 B 中的描述），这令人困惑。你能提供你的bundle.js和你的html文件之一吗？