How to handle global functions and global variables using webpack

Question

addMethod.js

function add(){
  // do something
}

Let say, I have a function add which can be accessed globally. But when I bundled this file with webpack(v4) I am facing an error add of undefined when I ran that file in the browser.

So far in my research, I have only come across people recommending that global functions and methods must be appended to window object

The problem is in a larger project, how do I handle these kinds of problems?

I know I can use export or window keyword.

But I am looking for any webpack plugin that will take care of this, instead of me having to update every file in my project??

Note: Webpack version - 4 and ES5

possible duplicate of https://stackoverflow.com/questions/32888728/correct-way-to-share-functions-between-components-in-react/32889002#32889002 — deowk, Jul 05 '18 at 07:19
Possible duplicate of [Correct way to share functions between components in React](https://stackoverflow.com/questions/32888728/correct-way-to-share-functions-between-components-in-react) — deowk, Jul 05 '18 at 07:20
Thanks for your response ... Instead of updating every files is any webpack plugin can handle it ? @deowk — Manjunath Davanam, Jul 05 '18 at 07:26
ok if you don't want to import them have a look at my answer below — deowk, Jul 05 '18 at 07:45

score 2 · Answer 1 · answered Jul 05 '18 at 07:44

2

If you don't want to import these functions in each file, you can add your global functions to a file called globals.js for example then add the following to your webpack config:

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      'global': [path_to_global.js] 
    }
  },

  plugins: [
    new webpack.ProvidePlugin({
      'global': 'global'
    })
  ]  
}

Then you can call you functions with global.yourFunction() anywhere in your app.

answered Jul 05 '18 at 07:44

deowk

4,280
1
25
34

I got your answer.. Let say, The problem is it's a big project and it has many global variables and global functions..So then i to have check each files and update to `global.functionName` everywhere right? I guess it's not best way to update each files just becoz of webpack. – Manjunath Davanam Jul 05 '18 at 07:52
I Guess better have some webpack plugin to resolve these kind of issues Am i right? – Manjunath Davanam Jul 05 '18 at 07:56
Suppose If i remove the webpack later then i will face an error right ? `global of undefined` – Manjunath Davanam Jul 05 '18 at 07:59
Yes you'll need to move all your global functions to the same file, if you have global variables you'll need to use `DefinePlugin` to expose them. You are going to have to do some work to get to get the project inline with best practices. OR you can just plonk them all onto the window object and accept the risks that come with that. – deowk Jul 05 '18 at 08:00
@ManjunathDavanam why would you remove webpack? – deowk Jul 05 '18 at 08:01
Just I am saying later some other best tool came than webpack – Manjunath Davanam Jul 05 '18 at 08:02
@ManjunathDavanam Then you cannot seriously expect that your whole project will build with this `other best tool` without any changes. – deowk Jul 05 '18 at 08:04
Yes I agree with you @deowk. I am saying just becoz of webpack we should not touch the code right .. The one thing i felt webpack is not best fit for ES5 am i right? – Manjunath Davanam Jul 05 '18 at 08:08
If you have global functions in your app my personal opinion is that it's better to prefix these methods with `global` because any developer looking at your code will instantly know that he is looking at a global function. In fact if you are going to add these onto the `window` object I would even recommend namespacing them in the same way. (with a more unique name of course) – deowk Jul 05 '18 at 08:09
Cool, I will think about it @deowk – Manjunath Davanam Jul 05 '18 at 09:29
One more clarification. Actually what i did instead of touching every file i just wrote a wrapper file to expose as global variable( link: https://gist.github.com/manjudr/e9494a409e90ff85066a87c3aacad44a) but still i am facing an issue `add of undefined` you have any idea for this? @deowk – Manjunath Davanam Jul 05 '18 at 09:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174401/discussion-between-manjunath-davanam-and-deowk). – Manjunath Davanam Jul 05 '18 at 09:56

score 0 · Answer 2 · answered Nov 04 '22 at 12:10

You probably tried to use webpack(4/5) to bundle js together from tags where code continued under it. I would suggest to actually not use webpack for this case, use uglifyJS/uglifyCSS.

npm install uglify-js -g

uglifyjs --compress --mangle --output bundle.js -- js/jquery.js js/silly.js

How to handle global functions and global variables using webpack

2 Answers2