Browserify不会提出要求
我正在用node.js构build一个web应用程序并进行expression。
我想使用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通过运行命令来创build文件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创build一个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
我看了堆栈溢出和其他地方在这个错误的其他问题，但一直没有能够解决这个问题。 我该怎么办？
我的代码在Bitbucket上可见： https ： //bitbucket.org/davidystephenson/cosette/src
除非使用–standalone标志，否则Browserify将创build自包含的捆绑包，而不会将任何内容暴露给全局名称空间，在这种情况下， 只有库的名称会获得全局绑定。
如果你试图在app.js包之外使用它的require函数：你不能，那现在是捆绑的工作方式。
你通常要做的是用commonjs风格（包括下划线/ jquery / etc的要求）编写所有的脚本，然后创build这个包。 如果你想require('jquery')实际使用已经可以在你的页面上使用的jQuery，你可以使用诸如browserify-global-shim类的东西来确保browserify是捆绑的，它只是replace任何require('jquery')它会用适当的“this-going-be-a-working-global-variable”来看待，比如jQuery或$ 。
如果您将来需要一些由browserify转换的代码中定义的一些function在浏览器中可见和可用，请将它们添加到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>