Rafa Yepes rafayepes

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>crypto</title>
	</head>
	<body>

	<script src="./node_modules/vault-cipher/lib/crypto-js/aes.js"></script>
	<script src="./node_modules/vault-cipher/lib/crypto-js/pbkdf2.js"></script>

	if (typeof define !== 'function') {
	// Not AMD
	if (typeof require === 'function') {
	// Node.js
	var define = function (body) {
	module.exports = body(require);
	};
	} else {
	// Vanilla browser
	var define = function (body) {

	/**
	* Annotated Gruntfile.
	* This builds a Backbone/Marionette application using Dust.js (Linkedin fork) as a
	* templating system, as well as some helpers from Foundation, with Browserify.
	* It also configures a watcher and static server with live reload.
	*/
	module.exports = function (grunt) {

	// This automatically loads grunt tasks from node_modules
	require("load-grunt-tasks")(grunt);

	var Promise = require('es6-promise').Promise;


	var handlerA = function () {
	return waitFor([handlerB])
	.then(function () {
	console.log('handlerA');
	});
	};
	var handlerB = function () {

	var Dialog = React.createClass({
	render: function() {
	// 1) render nothing, this way the DOM diff will never try to do
	// anything to it again, and we get a node to mess with
	return React.DOM.div();
	},

	componentDidMount: function() {
	// 2) do DOM lib stuff
	this.node = this.getDOMNode();

	var Popover = React.createClass({
	render: function() {
	// break this rendering tree
	return null;
	},

	componentDidMount: function() {
	var node = this.node = document.createElement('div');
	// append a node to render into later
	document.body.appendChild(node);