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

Question

我的 React 应用程序是通过 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'
}