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配置。

我希望它会对你有所帮助。

由于

Answer 2

我做了一些测试，这可以正常工作：

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 }

将ES6模块导入全局范围

2 个答案: