Question

我是webpack的新手，无法弄清楚如何向浏览器的全局命名空间公开类构造函数。例如，如何配置webpack，以便下面的代码在控制台中显示“ hello world”？我尝试使用exports-loader，expose-loader和script-loader失败了。

main.js

class MyClass {
  print() {
    console.log('hello world');
  }
}

index.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="./dist/bundle.js"></script>
    <script>
      myClass = new MyClass;
      myClass.print();
    </script>
  </body>
</html>

Answer 1

您可以：

a）显式公开您的函数（类）：

main.js

class MyClass {
  print() {
    console.log('hello world');
  }
}

window.MyClass = MyClass;

然后，您可以通过直接引用MyClass从全局对象中调用构造函数。

b）配置webpack，以将导出内容公开到全局对象中，如下所示：

webpack.config.js

module.exports = {
    output: {
        library: 'someName',
        libraryTarget: 'umd',
        globalObject: 'this'
    }
}

然后，您可以通过在上述配置文件中配置为library选项的全局变量中引用导出的函数（类）来调用构造函数。在此示例中，someName.MyClass。为此，必须将函数导出到main.js文件中，如下所示。

main.js

export class MyClass {
    print() {
        console.log('hello world');
    }
}

有关更多详细信息，请参见webpack output configuration。

Webpack：如何向浏览器的全局命名空间公开类构造函数

1 个答案: