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

Question

我遇到了一个不熟悉的场景。在我的React项目中，我导入了一个第三方供应商api文件。但是，供应商api使用不包含的Q promise库进行内部调用。该接口期望设置window.Q，并且是该接口的直接依赖项。我似乎不知道如何在window上正确地设置它，这样当我导入源文件顶部的供应商文件并使用它时，它不会抛出这个错误：

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

global-variables.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;

任何帮助都将不胜感激。

Answer 1

我建议使用webpack提供的扩展，或者使用您正在使用的任何其他捆绑包来捆绑您的javascript，以将Q作为全局变量提供。

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

示例：

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

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