Classic CommonJS modules assume a synchronous execution environment (for the purposes of “require”) with a specialized loader mechanism that evaluates the module in its proper context and takes care of namespacing it.\u00a0 If you want to use CommonJS modules in the browser you can either:<\/p>\n
The synchronous idiom for module “foo” might look like this:<\/p>\n
var bar = require(\"bar\");\r\nvar baz = require(\"baz\");\r\n\r\nexports.doStuff = function() {\r\n return \"awwww yeah.\";\r\n};<\/pre>\nThe asynchronous module definition<\/a> for “foo” might look like this, noting that there are actually a couple of possible variations on this:<\/p>\nrequire.def(\"foo\", [\"exports\", \"bar\", \"baz\"], function(exports, bar, baz) {\r\n\r\nexports.doStuff = function() {\r\n return \"awwww yeah.\";\r\n};\r\n\r\n);<\/pre>\nThe thing that may jump out at you is that the asynchronous wrapping means that the body of our module actually lives inside a function definition within the argument list of a function call.\u00a0 Let’s assume you enjoy the finer things in life and are using emacs and js2-mode for your javascript editing.\u00a0 js2-mode will helpfully suggest indenting 14 characters because that puts us 2 characters in from the enclosing function call’s opening paren.<\/p>\n
That indentation could drive a man crazy and was really my only reason for avoiding the asynchronous idiom.\u00a0 Thankfully, emacs being what it is, I was able to make it do what I roughly what I want:<\/p>\n
;; Check if the suggested indentation is due to require.def(). If it is, force\r\n;; the indentation down to zero. We detect this case by checking whether the\r\n;; parse depth is 2 and the last top-level point was preceded by require.def.\r\n(defun require-def-deindent (list index)\r\n (when (and (eq (nth 0 parse-status) 2)\r\n (save-excursion\r\n (let ((tl-point (syntax-ppss-toplevel-pos parse-status)))\r\n (goto-char tl-point)\r\n (backward-word 2)\r\n (equal \"require.def\" (buffer-substring (point) tl-point))))\r\n ;; only intercede if they are suggesting what the sexprs suggest\r\n (let ((suggested-column (js-proper-indentation parse-status)))\r\n (eq (nth index list) suggested-column))\r\n )\r\n (indent-line-to 0)\r\n 't\r\n ))\r\n;; Uncomment the following to enable the hook if you want tab to always slam you\r\n;; to column 0 rather than doing the cycle thing. (With the newline hook in\r\n;; place, I haven't seen the need yet.)\r\n;(add-hook 'js2-indent-hook 'require-def-deindent)\r\n\r\n;; Unfortunately, js2-enter-key turns off the bounce indent logic so we need to\r\n;; intentionally do something to get our helper invoked. In this case, we use\r\n;; advice but we could also mess with the keybinding.\r\n;; This assumes js2-enter-indents-newline is enabled \/ desired.\r\n(defadvice js2-enter-key (around js2-enter-key-around)\r\n \"Trigger require-def-deindent on enter for the newline.\"\r\n ad-do-it\r\n (let ((parse-status (save-excursion\r\n (parse-partial-sexp (point-min) (point-at-bol))))\r\n positions)\r\n (push (current-column) positions)\r\n (require-def-deindent positions 0)))\r\n(ad-activate 'js2-enter-key)<\/pre>\nIf you paste the above into your .emacs and have sufficient emacs karma, hopefully the above will work for you too.<\/p>\n
UPDATE (2011\/1\/1):<\/strong><\/p>\nThe AMD idiom has settled on using “define” instead of “require.def”, so here is the above code modified to this end:<\/p>\n
;; --- CommonJS AMD define() compensation\r\n\r\n;; Check if the suggested indentation is due to define(). If it is, force\r\n;; the indentation down to zero. We detect this case by checking whether the\r\n;; parse depth is 2 and the last top-level point was preceded by define.\r\n(defun require-def-deindent (list index)\r\n (when (and (eq (nth 0 parse-status) 2)\r\n (save-excursion\r\n (let ((tl-point (syntax-ppss-toplevel-pos parse-status)))\r\n (goto-char tl-point)\r\n (backward-word 1)\r\n (equal \"define\" (buffer-substring (point) tl-point))))\r\n ;; only intercede if they are suggesting what the sexprs suggest\r\n (let ((suggested-column (js-proper-indentation parse-status)))\r\n (eq (nth index list) suggested-column))\r\n )\r\n (indent-line-to 0)\r\n 't\r\n ))\r\n;; Uncomment the following to enable the hook if you want tab to always slam you\r\n;; to column 0 rather than doing the cycle thing. (With the newline hook in\r\n;; place, I haven't seen the need yet.)\r\n;(add-hook 'js2-indent-hook 'require-def-deindent)\r\n\r\n;; Unfortunately, js2-enter-key turns off the bounce indent logic so we need to\r\n;; intentionally do something to get our helper invoked. In this case, we use\r\n;; advice but we could also mess with the keybinding.\r\n;; This assumes js2-enter-indents-newline is enabled \/ desired.\r\n(defadvice js2-enter-key (around js2-enter-key-around)\r\n \"Trigger require-def-deindent on enter for the newline.\"\r\n ad-do-it\r\n (let ((parse-status (save-excursion\r\n (parse-partial-sexp (point-min) (point-at-bol))))\r\n positions)\r\n (push (current-column) positions)\r\n (require-def-deindent positions 0)))\r\n(ad-activate 'js2-enter-key)\r\n\r\n;; (end define compensation)<\/pre>\n","protected":false},"excerpt":{"rendered":"Classic CommonJS modules assume a synchronous execution environment (for the purposes of “require”) with a specialized loader mechanism that evaluates the module in its proper context and takes care of namespacing it.\u00a0 If you want to use CommonJS modules in … Continue reading