Make Snacks: Yet Another JavaScript Build System

Transcript

1. Make Snacks YET ANOTHER JAVASCRIPT BUILD SYSTEM
2. OUR APP ▸ Hello World As a Service ▸ .0001k lines of JavaScript ▸ No build system !
3. # Makefile node_modules: package.json npm install touch -m $@
4. $ make node_modules npm install touch -m node_modules
5. . !"" Makefile !"" node_modules <- create or update this #"" package.json <- whenever this changes
6. // src/hello.js module.exports = () => "hello"; // src/world.js module.exports = function() { return "world"; }; // src/index.js import hello from "./hello"; import world from "./world"; console.log(hello() + " " + world());
7. . !"" Makefile !"" lib <- render ES5 here !"" node_modules !"" package.json #"" src <- from ESwhatever sources here !"" hello.js !"" index.js #"" world.js
8. SRC = $(wildcard src/*.js) LIB = $(SRC:src/%.js=lib/%.js) lib: $(LIB) lib/%.js: src/%.js .babelrc node_modules mkdir -p $(@D) node_modules/.bin/babel $< -o $@
9. $ make lib/hello.js mkdir -p lib node_modules/.bin/babel src/hello.js -o lib/hello.js
10. // src/world.js module.exports = function() { return "world"; }; // lib/world.js "use strict"; module.exports = function () { return "world"; };
11. // src/hello.js module.exports = () => "hello"; // lib/hello.js "use strict"; module.exports = function () { return "hello"; };
12. // src/index.js import hello from "./hello"; import world from "./world"; console.log(hello() + " " + world());
13. // lib/index.js "use strict"; var _hello = require("./hello"); var _hello2 = _interopRequireDefault(_hello); var _world = require("./world"); var _world2 = _interopRequireDefault(_world); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log((0, _hello2.default)() + " " + (0, _world2.default)());
14. . !"" Makefile !"" bundle.js <- make this !"" lib <- by bundling these # !"" hello.js # !"" index.js # $"" world.js !"" node_modules !"" package.json $"" src <- which source from these !"" hello.js !"" index.js $"" world.js
15. bundle.js: $(LIB) node_modules/.bin/browserify lib/index.js > $@
16. (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require; if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}}; t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require; for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict"; module.exports = function () { return "hello"; }; },{}],2:[function(require,module,exports){ "use strict"; var _hello = require("./hello"); var _hello2 = _interopRequireDefault(_hello); var _world = require("./world"); var _world2 = _interopRequireDefault(_world); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log((0, _hello2.default)() + " " + (0, _world2.default)()); },{"./hello":1,"./world":3}],3:[function(require,module,exports){ "use strict"; module.exports = function () { return "world"; }; },{}]},{},[2]);
17. bundle.js: $(LIB) node_modules/.bin/browserify lib/index.js | ./node_modules/.bin/prepack > $@
18. console.log("hello world");
19. THANK YOU I'M SO SORRY