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.

Any update on this? I've been trying to learn to do the same for a while now. — Games Brainiac, Nov 24 '15 at 05:21
I'm trying to do the same, only dynamically create window/globals. Expose-loader works, but breaks down when you need to expose a TON of globals — user1828780, Dec 07 '16 at 04:42
@user1828780 There's a plugin for that https://www.npmjs.com/package/babel-plugin-global-scope — Bodman, Feb 22 '20 at 01:45

score 13 · Answer 1 · answered Apr 13 '18 at 11:45

13

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.

answered Apr 13 '18 at 11:45

ILCAI

1,164
2
15
35

4

This doesn't work for me. `window.test` is undefined – Vahid Jul 30 '19 at 11:59
try using window['test'] = test and make sure you call it after the js is loaded. – PhilWilliammee Aug 11 '19 at 14:48
very bad practice – TheToto Jan 05 '22 at 23:47

score 10 · Accepted Answer · edited Jun 08 '20 at 09:13

10

check out: https://github.com/webpack/docs/wiki/library-and-externals#examples

By setting the library output property to whatever name you want to wrap your globals would allow you to then call: YourLibrary.test();

module.exports = {
    entry: ['./_js/script.js'],
    output: {
       library: 'YourLibrary',
        path: __dirname,
        filename: './build/script.js'
    }

edited Jun 08 '20 at 09:13

Sebastian

1,076
9
24

answered Nov 29 '15 at 09:22

glued

2,579
1
25
40

9

but how to just export one function – Jiang YD Jul 13 '16 at 15:38
in the example above do you mean just calling `YourLibrary()` as a function, i'm not sure if that is possible. You can however only expose/export a single function, for example, export function `foo(){...` then call `YourLibrary.foo()` – glued Jul 14 '16 at 05:15
2

yes, but I need call functions in other module exported in `YourLibrary.foo()` – Jiang YD Jul 18 '16 at 10:59

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

2 Answers2

Linked

Related