CODEWITHSUNDEEP
gulpecmascript-6webpackbabeljs
Huhwha
Huhwha

Reputation: 575

How to use classes that are compiled with babel and exported with Webpack in the browser

I have a project for a websocket-based library that has components that need to run in both Node and the browser. Currently the library is organized and built as follows:

How do I access the various classes defined in the components in the browser? (i.e. how do I get the equivalent of var Client = require("client"); to work?)

P.S. - I'm using Gulp to manage all of this, so answers that include gulp solutions are especially appreciated.

Upvotes: 1

Views: 769

Answers (1)

Rico Herwig
Rico Herwig

Reputation: 1712

I hope, I got you right, but what you wanna do is basically to open your dev-tools in the browser and type client.myFunction(), right?

If so, you need to attach your library client to the global namespace or to the window object. This needs to happen in your main entry point file, where all your other submodules are imported.

Example (client.js)

import {myFunction} from './functions';
import {myConstant} from './constants';

const Client = {
    myFunction, // or: myFunction: myFunction (if you do not use ES7)
    myConstant
};

window.Client = Client; // or global.Client = Client;

Now you would include your script bundle in an HTML page via script-tag and should be able to call window.Client.myFunction(), i.e. Client.myFunction() in the browser or on your page.

Is that, what you were looking for? Let me know!

Upvotes: 2

Related Questions