在React组件中包含外部js脚本

Question

我有一个react应用程序，使用react脚本进行管理。

在我的应用程序中，我使用了一个外部的js脚本。外部脚本不执行任何模块导出。

外部脚本的结构如下所示(太大，无法完整包含它)。

var TradingView = {.... various functions }

在文件的末尾：

if (window.TradingView && jQuery) {
    jQuery.extend(window.TradingView, TradingView)
} else {
    window.TradingView = TradingView
}

我的目标是使用外部脚本创建一个简单的react组件，并调用函数：TradingView.widget({...});

我一直在网上寻找在react组件/es6风格中包含外部脚本的方法，并尝试了各种选择: react-async- script -loader，以及各种webpack插件: script-loader，imports-loader，ProvidePlugin等，但我还没能让它工作。

在使用imports-loader或ProvidePlugin之后，我得到的错误是：

1189:31    error    'jQuery' is not defined                        no-undef
1190:9     error    'jQuery' is not defined                        no-undef

在我的webpack配置中，我有：

在loaders部分中：

{
    test: /tv\.exec\.js/,
    loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

在plugins部分中：

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
})

当我创建一个简单的网页(无react)，并包含脚本，并调用TradingView.widget()时，页面就能正常工作。

我能得到的最接近的帮助是查看：Managing jQuery plugin dependency in webpack

但它对我不起作用。我对react，webpack生态系统非常陌生，所以我不确定我在这里错过了什么。

如果您需要任何其他信息，请告诉我。

更新:我测试了上面的脚本，包括一个简单的react组件中的脚本，但这次没有使用react- script，而是直接使用了webpack的配置。我只需将外部js直接导入到我的组件中，它就起作用了。我还能够在webpack中使用imports-loader插件来公开jQuery，这也是有效的。因此，使用react-scripts可能需要其他东西才能使其正常工作。

Answer 1

看起来你的外部脚本正在通过添加它们作为window的成员来处理它的“导出”。您可以在未定义导出的文件上使用import关键字，如下所示：

  import "modulename";

这种语法没有什么特别之处，除了它并不意味着任何函数或变量都可以通过import工具使用。将执行"modulename“中将成员分配给.window的代码，这是很重要的。

对于编译器对访问window.*全局变量的抱怨，请尝试将您想要访问的变量分配给局部变量：

const jquery = window.jquery;

也许...or ..。

const TradingView = window.TradingView;

然后你就有了作用域中的变量，它应该是可用的。