CODEWITHSUNDEEP
javascriptwebpackglobal-variables
jlp2071
jlp2071

Reputation: 35

How to access a variable from another JS file in webpack

I'm trying to implement webpack in a project, but can't seem to find a clear answer to this issue in their docs. I need to be able to access a certain variable globally from a JS file, for example:

toProps.js:

var myProp = "test";

In my entry point I do the following:

entry.js:

require('./toProps.js');
console.log(myProp);

But the variable myProp is undefined. This is an extremely simplified example, not my actual use case, but the point is that I'm working with an existing code base where there are these types of global references all over the place, but I want to implement some module and lazy loading with webpack.

How can I access the myProp variable?

Upvotes: 2

Views: 8894

Answers (4)

Thiago Sperandio
Thiago Sperandio

Reputation: 76

Using webpack 4

To update this post for anyone that can read it, acctually you can use a plugin in webpack.config.js to resolve names that used in another .js files.

Take a look in https://webpack.js.org/plugins/provide-plugin/ example:

Usage: jQuery

To automatically load jquery we can simply point both variables it exposes to the corresponding node module:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});

Then in any of our source code:

// in a module
$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

Upvotes: 1

EricOops
EricOops

Reputation: 449

If the source file to import belongs to maintainer, it's best to export first and import latter. Just like the answer of @Ibrahim.

I also encounter a situation to import third party source file just not using export syntax. So I think below is a solution while using webpack.

First, install exports-loader for your project.

npm install exports-loader --save-dev

Then, in your JS source file, import and use like below:

const WEBGL = require("exports-loader?WEBGL!three/examples/js/WebGL.js");
WEBGL.isWebGL2Available()

In my case, WEBGL is the inner variable I wish to import, three/examples/js/WebGL.js is the third party source file.

Hoping this is useful.

Upvotes: 0

Ibrahim
Ibrahim

Reputation: 340

Inside toProps.js:

var myProp = "test";
export default myProp;

Inside entry.js:

import myProp from './toProps.js';

From what I see, you haven't exported the variable. Therefore, it can't be an 'import' inside entry.js.

Edit 1: Learn more about exporting here.

Edit 2:

Okay, to make it a global variable, here's what I did:

Move props.js into /dist and link it inside index.html, before bundle.js, or whatever you've named the output file.

Now it's a global variable, so you don't actually need to export or import it anywhere.

To test this, I made a file called test.js, imported it into entry.js. Inside test.js is:

const logTest = () => {
  console.log(myProp)
}
export default logTest;

Now inside entry.js, I invoked the function. It worked as expected and 'test' showed up in the console.

As you mentioned, your example is simplified, so this may not be viable for you. Maybe, you could move all the global variables to one file inside /dist, inside an object, as it's best not to pollute the global object.

Edit 3: Go with the answer from Jonas W. Totally forgot you could do that.

Upvotes: 5

Jonas Wilms
Jonas Wilms

Reputation: 138557

If you really need a global variable (no you dont!), use window:

  window.myProp = "test";

Otherwise just export it from your file and import it everywhere you need it. That maybe adds some overhead to your code, but actually you always know where the value comes from, which makes debugging super simple.

Upvotes: 3

Related Questions