Frequire NPM | npm.io

frequire

require() for the browser - works with npm modules, browserify modules, components, expose objects and more

Also see the example

Example

server.js:

var f = require('frequire')(__dirname)

f.expose(f.node().js) // node.js shim, needed by browserify modules

f.require('popover') // component modules
f.require('http', 'http-browserify') // browserify modules, here with alias
f.require('shoe') // a browserify module
f.require('youtube-player') // another browserify module
f.require('./client') // our client code

f.expose(function () { window.onload = require('./client') }) // expose a function to execute immediately

f.expose('config', { name: 'frequire demo' }) // exposes objects in window

f.require('yo', { run: function () { alert('yo', config.name) } }) // expose an object as a module

f.expose('require("yo").run()') // expose raw code

app.use(f.middleware())

index.html

Simply insert these in <head>:

  <link rel="stylesheet" href="/wrapped.css">
  <script src="/wrapped.js"></script>

Then in your client code:

client.js

module.exports = function () {
  var $ = require('jquery')
  var http = require('http')
  var Popover = require('popover')
  var shoe = require('shoe')
  var YouTubePlayer = require('youtube-player')

  var $result = $('#result')

  $('a').on('click', function (ev) {
    var popover = new Popover($(this).attr('title'), 'Hello');
    popover.show(this)
    setTimeout(function () {
      popover.hide()
    }, 1000)
  })

  http.get({ path : '/beep' }, function (res) {
    var div = $result[0]
    div.innerHTML += 'GET /beep<br>';

    res.on('data', function (buf) {
      div.innerHTML += buf;
    });

    res.on('end', function () {
      div.innerHTML += '<br>__END__';
    });
  });

  var stream = shoe('/invert')

  stream.on('data', function (data) {
    $result[0].appendChild(document.createTextNode(data))
  })

  var p = new YouTubePlayer({ id: 'player', width: 400, height: 300 })

  p.play('EvObIwCu8CQ')
}