Browserify不提供需求

我正在用node.js构建一个webapp并进行表达。Browserify不提供需求

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

我已经看过在堆栈溢出或其他地方，在这个错误等问题，但一直没能解决这个问题。我该怎么办？

我的代码是可见到位桶：https://bitbucket.org/davidystephenson/cosette/src

来源

2015-03-18 David Y. Stephenson

的路径'/ lib目录/模型/ control.js'不从'公共/脚本/ index.js'存在。 – elclanrs 2015-03-18 23:32:26

那么我该如何导入我的控制模型？ – 2015-03-18 23:59:33

'../../ lib/model/control.js'。你有没有浏览你的公共'index.js'？ – elclanrs 2015-03-19 00:02:40

Browserify创建自包含的捆绑，而不会暴露任何东西，除非你使用--standalone标志的全局命名空间，在这种情况下，仅的库的名称得到了全局绑定。

如果您尝试在app.js包之外使用其require函数：您不能，那就是捆绑的工作方式。

你通常会做的是将所有脚本写入commonjs风格（包括下划线/ jquery/etc的要求！），然后创建捆绑包。如果你希望require('jquery')实际上使用已经可以在你的页面上使用的jquery，你可以使用像browserify-global-shim这样的东西来确保browserify是绑定的，它只是将它看到的任何require('jquery')替换为适当的“this-is-going-to-一个工作全球变量“，你告诉它，如jQuery或$。

来源

2015-03-18 23:41:43

我以为我通过'lib/model/control.js'绑定了'/ lib/controller/home.js'，然后在浏览器中导入。我可以使用browserify将本地模块公开给浏览器吗？我可以用什么工具来做到这一点？ – 2015-03-18 23:55:22

你只是说“浏览这一个文件”，然后它会发现整个依赖链并捆绑所有东西。所以你不捆绑“多个文件”，你只是说“捆绑，使用文件X作为起点，并且然后只要添加一些东西，就像你找到它们一样。说你的commonjs格式的主文件被称为“base，js”，它需要一百万件事和更多的文件，你仍然只会说“browserify base.js”，因为browserify会发现它需要捆绑到整个应用程序的一切工作。 – 2015-03-19 00:17:26

我确实这么做了。我只浏览了一个文件，“lib/controller/home.js”，它需要'lib/model/user.js'，它需要'lib/model/control.js'。问题是，我的浏览器不会让我需要任何东西。 – 2015-03-19 00:47:00

如果你将随时在未来需要一些由browserify转换为在浏览器中可见的和可用的代码中定义的函数，用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>

来源

2016-04-08 23:39:29

Browserify不提供需求

回答

相关问题