TLDR: How can I make a module (imported via ES6 syntax) globally scoped (or reference an imported class inside another class)?
I'm importing a module from a package which wasn't implemented properly (no export etc) but am running into some issues.
What I am doing is using var to set the module to global (not great) e.g.
var Example = require('./node_modules/example/long_path_to_file.js');
As I need to use it like so in my class (the module takes control of this and class instances aren't available in the global scope so I can't use my class as I normally would):
new window.Example(...)
This works but it isn't great as I'm using webpack and would prefer to use the proper es6 syntax
import Example from './example';
and then in example.js
export default Example = require('./node_modules/example/long_path_to_file.js');
However this means it is no longer global scoped, and I'm unable to find a fix.
I've tried things like window.Example = Example but it doesn't work.
If you are using webpack it's easy to setup it. So here is a simple example how to implement it.
webpack.config.js
module.exports = {
entry: 'test.js',
output: {
filename: 'bundle.js',
path: 'home',
library: 'home' // it assigns this module to the global (window) object
}
...
}
some.html
<script>console.log(home)</script>
Also if you open your bundle.js file you will see how webpack did it for you.
var home = // main point
/*****/ (function(modules) blablabla)
...
Also i suggest look at webpack library configuration.
I hope it will help you.
Thanks
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments