How expose a exported function into global scope with babel and webpack

Question

How can I compile my code with webpack and babel so that the exported function is available in the global scope.

So for example:

export function test(){console.log('test')}

Should be available under window.test().

When I just run babel -d I got what I expect:

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
exports.test = test;

function test() {
  console.log('test');
}

but the webpack output looks like this:

!function(e) {
  function t(r) {
    if (o[r])return o[r].exports;
    var n = o[r] = {exports: {}, id: r, loaded: !1};
    return e[r].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
  }

  var o = {};
  return t.m = e, t.c = o, t.p = "", t(0)
}([function(e, t) {
  "use strict";
  function o() {
    console.log("test")
  }

  Object.defineProperty(t, "__esModule", {value: !0}), t.test = o
}]);

end the test function is not available in the global scope.

Answer 1

You can easily set a property on the global window object. This will expose your object to the global scope.

function test() {
  console.log('test');
}

window.test = test;

If you are developing a piece of code that does not represent a library but just some operations or functionalities to operate in global scope, I would prefer this method over to setting the library output property as mentioned in the accepted answer.