node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

crossbridge

Dependency Status devDependency Status npm version # crossbridge

Share node modules between server and client.

Installation

npm install crossbridge

Description

This module builds a bridge between your server and client. It lets you use your node modules in your browser with setting up one single js file. ## Features

  • Let you use node modules on client side
  • Easy implementation
  • Automatic import of bundle file

crossbridge.init(options)

Initializes the whole structure of crossbridge.

options

  • path string required default 'crossbridge.js' – path of the source file

  • bundle string required default 'bundle.js' – path of the bundle file

  • root string optional default undefined – adds easier path for easier require('...') calls in browser example:

// app.js 
crossbridge.init({
    ...,
    root: './path/to/my'
})

If set so,

<script>
    const myModule = require('./path/to/my/module')
</script> 

becomes identical to

<script>
    const myModule = require('module')
</script> 
  • hidden boolean optional default false – adds a dot as prefix example: bundle.js => .bundle.js

  • write boolean optional default false – the bundle file will be written automatically after initialization. Useful when you don't use gulp or similar tools.

  • inject boolean optional default true – adds a script that loads the bundle file automatically. If set to false, you need to import the bundle file manually.

crossbridge.middleware()

Used as express middleware (See Use with Expressjs below).

Use with Expressjs

crossbridge.js

// crossbridge.js 
console.log('crossbridge is ready!')
const myModule = require('./path/to/my/module')
const myOtherModule = require('./path/to/my/other/module')

This code will be executed in the browser. So when you require modules into a variable, the variables will be in global scope.

<!-- index.html-->
<script>
    myModule.something()
    myOtherModule.somethingOther()
</script> 
console: crossbridge is ready!

app.js

// app.js 
const express = require('express')
const crossbridge = require('crossbridge')
 
const app = express()
app.use(crossbridge.init({
    hidden: true,
    write: true,
    path: 'crossbridge.js'
    bundle: 'bundle.js'
}))

Then add the middleware to any route you like to have the modules loaded

app.get('/', crossbridge.middleware(), function(req, res) {
...
})

Or with every route

app.use(crossbridge.middleware())

Use with Gulp

There is no good gulp support yet. So You can use this example code include crossbridge in your gulp workflow.

const file = require('gulp-file')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
 
// create stream from bundle data 
function crossbridgeStream(options) {
    const crossbridge = new Crossbridge(options)
    const bundle = crossbridge.bundle()
    return file.(options.path, bundle, {src: true})
}
 
gulp.task('crossbridge', () => {
    // get bundle data 
    gulpCrossbridge({
        path: 'crossbridge.js'
    })
    // 1 
    .pipe(babel({
        presets: ['es2015']
    }))
    // 2 
    .pipe(uglify())
    // rename to hidden file (.bundle.js) 
    .pipe(rename({
        prefix: '.',
        basename: 'bundle',
      }))
      // write to same folder as source file 
    .pipe(gulp.dest('./'))
})

Tips

  1. use gulp-babel so you can write your module in es6 code
  2. use gulp-uglify or similar tools to compress your bundle code