Skip to content

Instantly share code, notes, and snippets.

@rmurphey
rmurphey / share-modules.md
Last active August 29, 2015 14:15
How to share modules across RequireJS, CommonJS web apps?

Earlier today I tweeted:

I want to use node modules in my existing requirejs browser app. What’s the right path?

This was really understating the problem I'm trying to solve. I need a way to share modules across various JS (browser) applications. Some of these applications are RequireJS apps, and changing them away from that is probably not on the table. Others are newer applications where we have a choice when it comes to the build system -- common choices of late seem to be browserify and webpack.

I want to be able to maintain a set of modules separate from these projects that can be used by these projects. The requirements, then, are:

  • Modules must be usable by a CommonJS-based module/build system, such as Browserify or Webpack.
  • Modules must be usable by an AMD-based module/build system, such as RequireJS.
async.waterfall([
function1, // returns Thing1
(function () {
return function (Thing1) {
function2(Thing1, Obj1, Obj2, Obj3);
};
}()), // uses Thing1 to create Thing2 but also requires a lot of other parameters to be passed to it.
], function (err, result) {
if (err) {
console.log('barf')
/**
* a file that can be safely reloaded multiple times in the same page view,
* allowing some stuff to run once and some stuff to run every time the
* page is loaded
*/
var myInitiallyFalseThing = false || myInitiallyFalseThing;
(function() {
if (!myInitiallyFalseThing) {
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>author</key>
<string>Jacob Rus</string>
<key>comment</key>
<string>Created by Jacob Rus. Based on ‘Slate’ by Wilson Miner</string>
<key>name</key>
<string>RebeccaMurphey</string>
#
# Based upon the NCSA server configuration files originally by Rob McCool.
#
# This is the main Apache server configuration file. It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs-2.0/> for detailed information about
# the directives.
#
# Do NOT simply read the instructions in here without understanding
# what they do. They're here only as hints or reminders. If you are unsure
// some non-working in-theory code
dojo.declare("Tabs", dijit._Widget, {
postCreate:function(){
this.controller = dojo.create("ul");
dojo.place(this.conroller, this.domNode, "before");
this._scanChildren();
},
_scanChildren: function(){
dojo.provide('myProject.Stars');
dojo.require('dijit._Widget');
dojo.declare('myProject.Stars', dijit._Widget, {
postCreate : function() {
this.stars = dojo.query('div', this.domNode)[0];
this.input = dojo.query('input', this.domNode)[0];
this.hoverConnections = [];
dojo.provide('myProject.Callouts');
dojo.require('dijit._Widget');
dojo.require('myProject.Services');
dojo.declare('myProject.Callouts', dijit._Widget, {
cache : {},
services : new myProject.Services(),
dojo.provide('hitpost.ActivityMonitor');
dojo.declare('hitpost.ActivityMonitor', null, {
constructor : function(props) {
this._settings = {
domNode : dojo.body(),
events : [ 'mousemove', 'keypress' ],
allowedInactivePeriods : 3,
periodLength : 15,
/*
selecting and traversing exercises
- get the third list item (hint: eq())
- change its color to red
- change the color of the rest of the list items to blue
- *without doing another selection*, find the div.module
and remove the class module