Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to access a function in a Webpack bundle from a HTML script

The problem is that I would like to make a timeout function on my page. I have a silverlight app and a new react app in the page. This 2 "apps" need to have a common timer variable that I can in React read and display a <Div> if time is more then 10min.

The SilverLight app can call a JS function on every click. This works, but I'm not able to call a function inside the webpack bundled file?? Is it not possible to reach functions from a js function in a <script> from html side??

Do I have to send the Silverlight click time to the server and then do a ajax call from React every 1min or so to see if the Silverlight has been active? (does not sound like a good approach) Hope you can point me in the right direction or show me a good way to solve this problem for me :) and remember I'm new to react and webpack so I'm not able to use the right google words to find the solution myself.

like image 681
Svein Jarle Avatar asked Dec 23 '16 09:12

Svein Jarle


People also ask

How do I bundle a JavaScript file using Webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.

How does Webpack bundle work?

Webpack passes the file to the loader and the loader returns JavaScript code that is added to the bundle file. Loaders are chainable. This means that the result of some loader processing could be the entry of another loader. This is an example of chainable loaders, this always works from right to left.

How do you create a bundle on Webpack?

Create a Webpack Configuration File And add the following code: module. exports = { entry: './src/js/main. js', mode: 'development', output: { path: `${__dirname}/dist`, filename: 'bundle.


1 Answers

This is a very common question. There are different ways you could do this.

Method 1

If there are multiple such functions you would like to use outside of it, then you have to export the function using:

module.exports = {
      yourfunctionName
}

And then you have to configure your webpack to treat this as a library. This is how most of the libraries do. Now to access the function outside the bundled file. Simply use your library name (as configured in webpack) for e.g, let's say my library name is myLibrary then the code will be:

myLibrary.yourFunctionName

Method 2

if you don't need to export many functions or you are looking for a quick easy answer to this then you can add your functions to window object, which makes it available everywhere.

In your main file (which is going to be bundled) filename.bundle.js

window.functionName = yourFunction;

And wherever you want to access that function outside of bundle

window.functionName();

It isn't advisable to put the functions in window object, But if you are looking for quick easy fix then method 2 is good for you.

like image 80
Shiva Pandey Avatar answered Oct 17 '22 13:10

Shiva Pandey