从全局范围访问webpack模块/变量

Question

我通过webpack编译了我的反应应用程序。我正在使用google recaptca的回调网址：

<script defer src='https://www.google.com/recaptcha/api.js?render=explicit&onload=mywebpackfn'></script>

mywebpackfn是在我的webpack编译的js文件中定义的。 api.js找不到它。如何从外部访问webpack js范围？

Answer 1

您可以简单地将您的功能暴露给全局范围。在你的代码里面

if( typeof window !== 'undefined' ) { // browser env
    window.mywebpackfn = yourFunction
}

或者想要访问全球范围的东西

// I know kung fu
(new Function('return this')()).mywebpackfn = yourFunction

此外，您可能希望将代码编译为库https://webpack.js.org/configuration/output/#output-library

Webpack配置

output: {
  ..
  library: 'mywebpackfn',
  libraryTarget: 'window'
}

Answer 2

如果您熟悉nodejs，那么您可以在该webpack和api.js之外创建节点服务器。通过这种方式，节点服务器对webpack和api.js都是通用的。 通过这种方式，您可以从webpack导出文件，api.js仍然需要该nodejs服务器。

希望这会有所帮助。

Answer 3

如果您希望通过webpack控制事物，而不是直接在代码库中分配窗口，则可以使用expose-loader

https://github.com/webpack-contrib/expose-loader

或者您可以指定webpack的output.library选项，该选项会将您的条目文件的导出作为全局范围内的对象公开 - 您可以从那里导出回调