首页 文章

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

提问于
浏览
1

我有一个使用 react-scripts 管理的反应应用程序。

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

外部脚本的结构如下(太大而不能完全包含它)。

var TradingView = {.... various functions }

在文件的末尾:

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

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

我一直在网上搜索以反应 component/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()时,页面工作正常。

最接近我可以得到帮助的是:管理 webpack 中的 jQuery 插件依赖项

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

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

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

1 回答

  • 1

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

    import "modulename";
    

    除了它并不意味着任何函数或变量将通过导入工具可用之外,该语法没有什么特别之处。 “modulename”中将成员分配给.window 的代码将执行,这是重要的事情。

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

    const jquery = window.jquery;
    

    ...or 也许......

    const TradingView = window.TradingView;
    

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

相关问题