Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make Snacks: Yet Another JavaScript Build System

Brian Hicks
September 07, 2017

Make Snacks: Yet Another JavaScript Build System

Brian Hicks

September 07, 2017
Tweet

More Decks by Brian Hicks

Other Decks in Technology

Transcript

  1. OUR APP ▸ Hello World As a Service ▸ .0001k

    lines of JavaScript ▸ No build system !
  2. . !"" Makefile !"" node_modules <- create or update this

    #"" package.json <- whenever this changes
  3. // 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());
  4. . !"" Makefile !"" lib <- render ES5 here !""

    node_modules !"" package.json #"" src <- from ESwhatever sources here !"" hello.js !"" index.js #"" world.js
  5. 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 $@
  6. // src/world.js module.exports = function() { return "world"; }; //

    lib/world.js "use strict"; module.exports = function () { return "world"; };
  7. // src/hello.js module.exports = () => "hello"; // lib/hello.js "use

    strict"; module.exports = function () { return "hello"; };
  8. // 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)());
  9. . !"" 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
  10. (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]);