CommonJS в браузере Шувалов Антон

1

Что такое CommonJS?

2

Как работает CommonJS?

3

'use strict'; var $ = require('jquery'); var counter = 0;

exports.inc = function (count) { counter += count || 1; }; exports.get = function () { return counter; }

4

Как работает CommonJS

var var

exports. exports. }

5

(function (require, exports, …) {

})(require, exports, …)

Как работает CommonJS

$ browserify index.js > bundle.js

6

Jonathan:proxy.js jong$ pkgcount --duplicates

NAME COUNT abbrev@1.0.5 25 accepts@1.0.7 9 amdefine@0.1.0 105 ansi-regex@0.1.0 8 ansi-regex@0.2.1 16 ansi-styles@1.0.0 26 ansi-styles@1.1.0 8 argparse@0.1.15 34 asn1@0.1.11 26 assert-plus@0.1.2 26 ast-types@0.4.8 17 async@0.2.10 60 async@0.9.0 60 …и еще 200 строк

7

Вложенные зависимости

// get-val.js module.exports = function init($) { return function(el){ return $(el).val(); } };

8

Плоские зависимости

9

// index.js var $ = require('jquery'); var $getVal = require('get-val')($);

var password = $getVal('.password');

// get-val.js module.exports = function init($) { return function(el){ return $(el).val(); } };

Плоские зависимости

// index.js var Backbone = require('Backbone'); var $ = Backbone.$ = require('jquery');

10

Плоские зависимости

(function (factory) { "use strict"; if (typeof define === 'function' && define.amd) { // using AMD define(['jquery'], factory); } else if (typeof exports !== 'undefined') { // using CommonJS module.exports = factory2; } else { // no AMD/CommonJS; invoke directly factory(jQuery); } })(function($) { "use strict"; // plugin code });

11

http://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html

Поддержка

NPM8 629 620 downloads in the last day 121 187 099 downloads in the last week 475 001 308 downloads in the last month

12

CommonJS в браузере:- Простота - Нет шаблонного кода - Миллионы готовых модулей в NPM

13

|_~(˘▾˘~)- http://github.com/shuvalov-anton - http://twitter.com/shuvalov_anton - http://shuvalov.info

14