javascript - Import ES6 module into global scope - Stack Overflow

admin管理员组

文章数量:1189403

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.

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.

• javascript
• ecmascript-6
• webpack

Share Improve this question Follow edited Feb 24, 2016 at 12:50 asked Feb 24, 2016 at 11:21 user5786934user5786934 10

• Just to get this straight, example/long_path_to_file.js is setting a variable window.Example which you want to use via webpack? – CodingIntrigue Commented Feb 24, 2016 at 11:27
• 1 window.aaa = require(....)\ – Royi Namir Commented Feb 24, 2016 at 11:28
• @RGraham That file just exports some code I need to use; I was setting it to window.Example by using var Example in the outermost scope (not sure if strict mode even allows that). I need it to be global because this module takes over the context in my class (and es6 class instances aren't referenced in the global scope) – user5786934 Commented Feb 24, 2016 at 11:30
• Then @RoyiNamir is correct – CodingIntrigue Commented Feb 24, 2016 at 11:32
• @RGraham my first example (using require) already works but I want to know how to make a module global using ES6 – user5786934 Commented Feb 24, 2016 at 11:33

 |  Show 5 more comments

2 Answers 2

Sorted by: Reset to default 13

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

I've done some testing and this works correctly:

import './middleman';

// './middleman.js'
window.Example = require('./example.js').default
// OR
window.Example = require('./example.js').Example

// './example.js'
export function Example() {
  this.name = 'Example'
}
export { Example as default }

本文标签： javascriptImport ES6 module into global scopeStack Overflow