ReactJS - 如何在窗口上设置属性？答案

【问题标题】：ReactJS - How to set property on window?ReactJS - 如何在窗口上设置属性？
【发布时间】：2017-03-01 01:59:45
【问题描述】：

我遇到了一个不熟悉的场景。在我的 React 项目中，我导入了一个 3rd 方供应商 api 文件。但是，供应商 api 使用 Q Promise 库进行内部调用，该库不包括在内。 api 需要设置 window.Q 并且是 api 的直接依赖项。我似乎无法弄清楚如何在窗口上正确设置它，以便当我在源文件顶部导入供应商文件并使用它时，它不会抛出此错误：

TypeError: undefined is not an object (evaluating '$q.defer')

全局变量.js：

注意：我在这个文件中导入了供应商库，因为ds 是在文件中创建的一个全局变量，供消费者调用。

import '../../vendor/vendor-library';

const globals = {
    DATA_SERVICE: ds,
};

export default globals;

user.js:

import globals from '../globals/global-variables';

const userApi = {
    getCurrentUser() {
        return globals.DATA_SERVICE.getDataForCurrentObject('User', 'ID');
    },
};

export default userApi;

我尝试在项目入口点的顶部执行此操作，但没有解决问题：

index.js：

import q from 'q';
window.Q = q;

任何帮助将不胜感激。

【问题讨论】：

听起来是个很糟糕的库。除非需要，否则我可能会重新评估是否有更好的东西。您的应用程序的安全性取决于您最不安全的依赖项...
FWIW，如果你仍然需要使用它，你可以在这篇文章中做类似的事情：github.com/webpack/webpack/issues/542
嘿 Slider 我正在查看您的代码，如果您能给我提供有关您正在使用的供应商 api 的更多信息，那将会很有帮助。以他们“要求”的方式使用“Q”很奇怪；通常我熟悉的“q”是一个 npm 模块。 package.json 中存在的模块。
看不清楚。也许你需要github.com/webpack-contrib/imports-loader？
谢谢你的建议，我明天去看看。如果您不介意，这里是供应商 API 的链接：developer.veevacrm.com/MyInsightsLibrary/#myinsights-v2-0-beta。这是文件：cdnmc1.vod309.com/htmlreports/dataAccessLibrary.js。 @MattFernandez 如果您看一下，您会发现他们期望 window.Q 已经定义。我在一个香草应用程序中进行了测试，只是将 Q 库放在脚本标签中，然后将此供应商 api 文件放在 html 内的脚本标签中。我确认这使它起作用。现在只是尝试在 React 应用程序中执行此操作。

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

我建议使用webpack 或您用来捆绑javascript 的任何其他捆绑器提供的扩展，以将Q 提供为全局。

在 webpack 中，这可以通过 webpack.ProvidePlugin 来完成

例子：

module.exports = {
    module : {
       ...
    },
    plugins : [
        new webpack.ProvidePlugin({
            Q: "q",
            "window.Q": "q",
        }),
   ],
};

在这种情况下，"q" 是 Q library from npm 的名称，您必须将其作为依赖项添加到您的项目中。

【讨论】：

工作就像一个魅力。谢谢！