javascript - 将 ES6 模块导入全局范围

Question

TLDR:如何使模块(通过 ES6 语法导入)成为全局范围(或​​在另一个类中引用导入的类)？

---

我正在从未正确实现(没有导出等)但遇到了一些问题的包中导入模块。

我正在做的是使用 var 将模块设置为全局(不是很好)，例如

var Example = require('./node_modules/example/long_path_to_file.js');

因为我需要像在我的类中那样使用它(模块控制 this 并且类实例在全局范围内不可用，所以我不能像往常一样使用我的类会):

new window.Example(...)

这行得通，但不是很好，因为我使用的是 webpack 并且更愿意使用正确的 es6 语法

import Example from './example';

然后在 example.js

export default Example = require('./node_modules/example/long_path_to_file.js');

然而，这意味着它不再是全局范围的，而且我无法找到修复方法。

我已经尝试过像 window.Example = Example 这样的东西，但它不起作用。

Answer 1

如果您使用的是 webpack，那么设置它很容易。所以这是一个如何实现它的简单示例。

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>

此外，如果您打开 bundle.js 文件，您将看到 webpack 是如何为您完成的。

var home =  // main point
/*****/ (function(modules) blablabla)
...

另外我建议看看 webpack library配置。

希望对您有所帮助。

谢谢