Javascript Browserify不提供require

我正在用node.js和express构建一个webapp

我想使用Browserify使本地模块在浏览器中可用

我的应用程序的结构如下：

├── app.js
├── lib
│   ├── controller
│   │   ├── home.js
│   │   └── mixer.js
│   ├── model
│   │   ├── command.js
│   │   ├── control.js
│   │   ├── room.js
│   │   └── user.js
│   └── view
│       ├── error.jade
│       ├── index.jade
│       ├── input.jade
│       ├── layout.jade
│       └── room.jade
├── package.json
└── public
    ├── images
    ├── scripts
    │   ├── app.js
    │   ├── command.js
    │   ├── index.js
    │   ├── room.js
    │   └── user.js
    └── styles
        └── styles.css

我有一个名为

控制的本地模块

：

module.exports = function() {
  var control = {};

  control.command = false;
  control.create = false;
  control.last = 0;
  control.room = false;
  control.state = 2;
  control.time = 0;

  return control;
};

我使用Browserify通过运行以下命令来创建文件

public/scripts/app.js

：

browserify-d lib/controller/home.js>public/scripts/app.js

home.js

需要

lib/model/user.js

，它需要

lib/model/control.js

，因此它应该在编译脚本中可用

在我的

lib/views/layout.jade

文件中，我加载以下脚本：

doctype html
html
  head
    title cosette #{name}
    link(rel='stylesheet', href='http://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css')
    link(rel='stylesheet', href='http://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css')
    link(rel='stylesheet', href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/bootstrap-table.min.css')
    script(src='http://code.jquery.com/jquery-1.11.1.js')
    script(src='http://code.jquery.com/ui/1.11.2/jquery-ui.min.js')
    script(src='http://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js')
    script(src='http://cdn.socket.io/socket.io-1.2.0.js')
    script(src='http://underscorejs.org/underscore-min.js')
    script(src='/scripts/app.js')

    link(rel='stylesheet', href='/styles/styles.css')
  body
    .container-fluid
      .page-header
        h1
          a(href='/')#title cosette
          a(href='/room/' + name).small#name= name

      block content

然后，在我的

lib/views/index.js

文件中，我从

public/scripts

导入

index.js

文件：

extends layout

block content
  .row
    .col-xs-12.col-sm-6.col-md-6
      #notifications.list-group

    .col-xs-12.col-sm-6.col-md-6
      .input-group
        input(type='text')#room.form-control
        span.input-group-btn
          button(type='button')#create.btn.btn-default Create

      #rooms.list-group

  // Activate page
  script(src='/scripts/index.js')

最后，在我的

public/scripts/index.js

文件中，我尝试使用

require

创建

控件

实例：

var control = require('./lib/model/control.js');

var socket = io();

var rooms = {};

var update = function() {
  $('#rooms').empty();

  for (var roomIndex in rooms) {
    var room = rooms[roomIndex];

    $('#rooms').append('<a href="/room/' + room + '" class="list-group-item">' + room + '</a>');
  }

  socket.emit('control', control);
};

// Control
$('#create').click(function() { control.create = $('#room').val(); });

// Input
socket.on('rooms', function(message) { rooms = message; });

setInterval(update, 1000);

var-control=require（'./lib/model/control.js'）；
var socket=io（）；
var房间={}；
var update=函数（）{
$（“#房间”）.empty（）；
for（房间中的var roomIndex）{
var房间=房间[roomIndex]；
$（“#房间”）。附加（“”）；
}
socket.emit（'control'，control'）；
};
//控制
$（'create'）。单击（function（）{control.create=$（'room'）.val（）}）；
//输入
on（'rooms'，function（message）{rooms=message；}）；
设置间隔（更新，1000）；

但是，当我尝试加载此页面时，我得到一个错误：

uncaughtreferenceerror:require未定义

我已经研究了堆栈溢出和其他与此错误有关的问题，但是没有能够修复此问题。我该怎么办

---

我的代码在Bitbucket上可见：

Browserify创建自包含的bundle，而不向全局命名空间公开任何内容，除非使用--standalone标志，在这种情况下，只有库的名称获得全局绑定

如果您试图在app.js捆绑包之外使用其

require

功能：您当然不能，这就是捆绑包的工作方式

---

相反，您通常会使用commonjs样式编写所有脚本（包括下划线/jquery/etc要求！），然后创建包。如果您希望

require（'jquery'）

实际使用页面上已有的jquery，您可以使用

browserify global shim

之类的工具来确保在browserify绑定时，它只需用适当的“this-is-go-to-be-working-global-variable”替换它看到的任何

require（'jquery'）

您告诉它的，如

jQuery

或

$

如果您将来需要browserify转换的代码中定义的某些函数在浏览器中可见和可用，请在它们前面加上

窗口。

。这样，您将把它们添加到窗口范围中，浏览器将能够看到它们并在包之外使用它们

“严格使用”；
window.greeting=函数（名称）{
警报（“你好”+姓名）；
}

问候页

问候语（“汤姆”）；

路径

/lib/model/control.js

不存在于

public/scripts/index.js

中。那么如何导入我的控件模型？

。/../lib/model/control.js

。你是否浏览了你的公共

index.js

？我从

lib/controller/home.js开始浏览。它不会导入
lib/view/index.js
，但该视图会在浏览器中导入导出的browserify脚本。我显然是走错了路，但我不确定我应该如何处理这种类型的结构。我以为我是通过将
lib/model/control.js
通过
/lib/controller/home.js
捆绑在一起，然后在浏览器中导入。我可以使用browserify向浏览器公开本地模块吗？我可以用什么工具来做这件事呢？你只要说“浏览这一个文件”，它就会发现整个依赖链，并将所有内容打包。所以，您不需要捆绑“多个文件”，只需说“捆绑，使用文件X作为起点，然后在找到它们时添加内容”。假设您的commonjs格式的主文件名为“base，js”，它需要大量的东西和更多的文件，您仍然只需要说“browserify base.js”，因为browserify会找到所有需要捆绑的东西，以使整个应用程序正常工作。我做到了。我只浏览了一个文件，
lib/controller/home.js
，它需要
lib/model/user.js
，需要
lib/model/control.js
。问题是，我的浏览器不允许我需要任何东西。对吧，那么你为什么能够进一步要求任何东西呢？捆绑包的要点是它是“完成”的，您不需要更多的东西，所有东西都是自包含的，并且是封装的，因此您在以后的工作中不需要任何东西。已经处理好了。你不能仅仅在你的
public/scripts/index.js中调用
require
，期望它能工作，Browserify一点也不会给你。相反，你需要浏览
index.js
，这样它就可以创建一个包来满足这个需求。哦，那么我浏览了浏览器在HTML中调用的脚本？这与我认为我读的教程有用的不同。