Question

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

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

全局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的名称，您必须将其添加为项目的依赖项。

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

1 个答案: