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不提供需求

回答

相關問題