浏览器化不提供要求
Browserify does not make require available
我正在构建一个带有node.js和express的Web应用程序。
我想使用 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;
};
我使用浏览器通过运行以下命令来创建文件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
创建一个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
Browserify 创建自包含的捆绑包,除非使用 --standalone 标志,否则不会向全局命名空间公开任何内容,在这种情况下,只有库的名称获得全局绑定。
如果您尝试在应用程序之外使用其require
功能.js捆绑包:您显然不能,这就是捆绑现在的工作方式。
相反,你通常会做的是用commonjs风格编写所有脚本(包括下划线/jquery/etc要求!(,然后创建捆绑包。如果您希望require('jquery')
实际使用页面上已经可用的jquery,则可以使用类似browserify-global-shim
的东西来确保在browserify捆绑时,它只是将它看到的任何require('jquery')
替换为您告诉它的适当的"this-is-go-to-be-a-work-global-variable",例如jQuery
或$
。
如果您将来需要浏览器转换的代码中定义的某些函数在浏览器中可见和可用,请在它们前面加上 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>
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 有时数据是't显示在浏览器中
- 使图像在单击时展开到不大于浏览器
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- 不同浏览器中的空白字符正则表达式行为
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何临时暂停浏览器渲染,然后恢复整个页面
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 禁用(而不是隐藏)浏览器滚动条
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 是否可以在浏览器中使用纯JavaScript保存音频流
- jQuery检测浏览器是否支持Zoom
- 重定向时角度刷新浏览器