Browserify 不提供要求

Question

我正在用 node.js 和 express 构建一个网络应用程序。

我想使用 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

我有一个名为 Control:

的本地模块

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/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 创建一个 Control 实例：

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);

但是，当我尝试加载此页面时，出现错误：Uncaught ReferenceError: require is not defined

我在 Stack Overflow 和其他地方查看了此错误的其他问题，但未能解决问题。我该怎么办？

我的代码在 Bitbucket 上可见：https://bitbucket.org/davidystephenson/cosette/src

Answer 1

Browserify 创建独立的包，不会向全局命名空间公开任何内容，除非您使用 --standalone 标志，在这种情况下，仅库的名称获得全局绑定。

如果您尝试在 app.js 捆绑包之外使用它的 require 功能：您显然不能，这就是现在捆绑的工作方式。

您通常会做的是以 commonjs 风格编写所有脚本（包括 underscore/jquery/etc 要求！），然后创建包。如果您随后希望 require('jquery') 实际使用您页面上已经可用的 jquery，您可以使用 browserify-global-shim 之类的东西来确保在 browserify 捆绑时，它只是替换任何 require('jquery') 它会看到您告诉它的适当 "this-is-going-to-be-a-working-global-variable"，例如 jQuery 或 $.

Answer 2

如果您将来任何时候需要 browserify 转换后的代码中定义的一些函数在浏览器中可见和可用，请在它们前面加上 window.。这样你就可以将它们添加到 window 范围内，浏览器将能够看到它们并在包之外使用它们。

"use strict";

window.greeting = function(name) {
  alert("Hello " + name);
}

<!doctype html>
<html>

<head>
  <script src="dist/js/bundle.js" type="text/javascript"></script>
</head>

<body>
  <p>Greeting page</p>

  <script type="text/javascript">
    greeting('Tom');
  </script>
</body>

</html>

Browserify 不提供要求

Browserify does not make require available

javascript

node.js

express

require

browserify