Question

我是Browserify的新手，但我想我错过了一些东西。据我所知，我必须将我的应用程序的每个模块加载到bundle.js中，但我完全迷失了如何调用特定页面的函数，对象等。

例如，这是我的main.js文件：

var bootstrap = require('bootstrap');
var mainUI = require('./main-ui');
var foodGrid = require('./food-grid');
mainUI();

mainUI();位没问题，因为我需要在每个页面上执行以使我的侧边栏工作。

然而，foodGrid是我在访问食物页面时只想加载的东西。如果我这样做：

var bootstrap = require('bootstrap');
var mainUI = require('./main-ui');
var foodGrid = require('./food-grid');
mainUI();
foodGrid();

然后在每个页面上调用foodGrid()，这是不正确的。

foodGrid（）定义为：

module.exports = function () {
    console.log('Test');
})

我无法看到一种让它工作的方法，因为所有内容都被捆绑到bundle.js中，而没有围绕函数做一些逻辑来确定用户是否在某个页面上，这看起来很荒谬。

我的食物页面是：

@extends('layouts.master')

@section('title')
    Enquiries
@stop

@section('body')
    <div class="row">
        <div class="col-xs-12">
            <h3>Food</h3>
        </div>
    </div>
    <div id="food_controls" class="row">
        <div class="col-xs-9">
            Control
        </div>
        <div class="col-xs-3">
            <div class="input-group">
                <span class="input-group-addon"><img width="20" src="{!!asset('images/loader.gif')!!}"><i class="fa fa-search"></i></span>
                <input class="form-control" type="text" placeholder="Start typing to search...">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div id="foodGrid"></div>
        </div>
    </div>

@stop

@section('js')
    {!! HTML::script('js/libs/kendo.all.min.js') !!}
    <script>
        enquiriesGrid();
    </script>
@stop

上面给出了foodGrid（）未定义的错误。

有人可以告诉我如何使用它吗？我一定错过了一些大事。

（我正在使用Laravel 5，这就是所有刀片语法）

elixir(function(mix) {
    mix.browserify('main.js');
});

Browserify页面特定模块

0 个答案: