Question

我有一个使用react-scripts管理的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"
})

当我创建一个简单的网页（没有反应），并包含该脚本，并调用TradingView.widget()时，页面工作正常。

最接近我可以得到帮助的是： Managing jQuery plugin dependency in webpack

但它对我没用。我对反应，webpack生态系统很新，所以我不确定我在这里缺少什么。

如果您需要任何其他信息，请与我们联系。

更新：我测试了上面的内容，包括简单反应组件中的脚本，但这次没有使用react-scripts，而是直接使用webpack配置。我只是能够直接导入我的组件中的外部js，并且它有效。我还能够在webpack中使用imports-loader插件来公开jQuery，这也很有用。因此，使用react-scripts可能需要其他东西来使其工作。

Answer 1

看起来您的外部脚本通过将它们添加为窗口成员来处理其“导出”。您可以在未定义导出的文件上使用import关键字：

  import "modulename";

该语法没有什么特别之处，只是它并不意味着任何函数或变量都可以通过导入工具获得。中将成员分配给.window的代码将执行，这是重要的事情。

对于有关访问window。* globals的编译器投诉，请尝试分配要访问局部变量的变量：

const jquery = window.jquery;

...或者......或者......

const TradingView = window.TradingView;

然后你将在范围内拥有变量，它应该是可用的。

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

1 个答案: