NPM module in the browser

Question

How do I use this NPM module in the browser without import or require by just calling a function such as diff (obj1, obj2)?

NPM package: https://github.com/eraykose/nested-object-diff

AMD build: https://raw.githubusercontent.com/eraykose/nested-object-diff/master/dist/index.js

In browser console, running the below results in an error. How do I call the function?

// source: https://unpkg.com/nested-object-diff@1.1.0/dist/index.js
(function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.index=c.exports}})(this,function(a){"use strict";function b(a){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},b(a)}function c(a,c){return c&&("object"===b(c)||"function"==typeof c)?c:d(a)}function d(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function e(a){return e=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},e(a)}function f(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&g(a,b)}function g(a,b){return g=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},g(a,b)}function h(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(a,"__esModule",{value:!0}),a.diff=void 0;var i=function a(b,c){h(this,a),this.type=b,this.path=c?c.toString():""},j=/*#__PURE__*/function(a){function b(a,d,f){var g;return h(this,b),g=c(this,e(b).call(this,"E",a)),g.lhs=d,g.rhs=f,g}return f(b,a),b}(i),k=/*#__PURE__*/function(a){function b(a,d,f,g){var i;return h(this,b),i=c(this,e(b).call(this,"M",a)),i.item=d,i.lhsIndex=f,i.rhsIndex=g,i}return f(b,a),b}(i),l=/*#__PURE__*/function(a){function b(a,d){var f;return h(this,b),f=c(this,e(b).call(this,"D",a)),f.lhs=d,f}return f(b,a),b}(i),m=/*#__PURE__*/function(a){function b(a,d){var f;return h(this,b),f=c(this,e(b).call(this,"A",a)),f.rhs=d,f}return f(b,a),b}(i),n=function(a,b){return a?"".concat(a,".").concat(b):b};a.diff=function diff(a,b){var c=2p;)d.push(new l(n(c,o),a[o--]));if(-1o;)d.push(new m(n(c,p),b[p--]));for(;0<=o;--o)h(a[o],b[o],n(c,o))}else g(a,b,c,e)};return h(a,b),d}});

// below is an example from documentation: https://github.com/eraykose/nested-object-diff

var lhs = {
  shop: {
    products: [
      { id: 1, name: "a" }, 
      { id: 2, name: "b" }, 
      { id: 3, name: "c" }
    ]
  },
  name: "foo"
};

var rhs = {
  shop: {
    products: [
      { id: 1, name: 'a' },
      { id: 4, name: 'd' },
      { id: 5, name: 'e' },
      { id: 3, name: 'cc' }
    ]
  },
  name: "baz"
};

var differences = diff(lhs, rhs); // ERROR: diff is not defined

How do I call this function?

n-- · Accepted Answer

Since there is a hard constraint in using any kind of module loader techniques, the most obvious solution is to insert the module source right in the source file, then mimicking the work of loader, wrap the module source in a scope function that further is executed to export the module methods, like this:

const module = function () {
  return (function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.index=c.exports}})(this,function(a){"use strict";function b(a){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},b(a)}function c(a,c){return c&&("object"===b(c)||"function"==typeof c)?c:d(a)}function d(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function e(a){return e=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},e(a)}function f(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&g(a,b)}function g(a,b){return g=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},g(a,b)}function h(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(a,"__esModule",{value:!0}),a.diff=void 0;var i=function a(b,c){h(this,a),this.type=b,this.path=c?c.toString():""},j=/*#__PURE__*/function(a){function b(a,d,f){var g;return h(this,b),g=c(this,e(b).call(this,"E",a)),g.lhs=d,g.rhs=f,g}return f(b,a),b}(i),k=/*#__PURE__*/function(a){function b(a,d,f,g){var i;return h(this,b),i=c(this,e(b).call(this,"M",a)),i.item=d,i.lhsIndex=f,i.rhsIndex=g,i}return f(b,a),b}(i),l=/*#__PURE__*/function(a){function b(a,d){var f;return h(this,b),f=c(this,e(b).call(this,"D",a)),f.lhs=d,f}return f(b,a),b}(i),m=/*#__PURE__*/function(a){function b(a,d){var f;return h(this,b),f=c(this,e(b).call(this,"A",a)),f.rhs=d,f}return f(b,a),b}(i),n=function(a,b){return a?"".concat(a,".").concat(b):b};a.diff=function diff(a,b){var c=2p;)d.push(new l(n(c,o),a[o--]));if(-1o;)d.push(new m(n(c,p),b[p--]));for(;0<=o;--o)h(a[o],b[o],n(c,o))}else g(a,b,c,e)};return h(a,b),d}});
};

const {diff} = (host => (module.call(host), host.index))({});


var lhs = {
  shop: {
    products: [
      { id: 1, name: "a" }, 
      { id: 2, name: "b" }, 
      { id: 3, name: "c" }
    ]
  },
  name: "foo"
};

var rhs = {
  shop: {
    products: [
      { id: 1, name: 'a' },
      { id: 4, name: 'd' },
      { id: 5, name: 'e' },
      { id: 3, name: 'cc' }
    ]
  },
  name: "baz"
};

var differences = diff(lhs, rhs);

console.log(differences);

NPM module in the browser

Answers (1)

Related Questions