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

Question

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

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

全局变量.js:

注意:我在此文件中导入了 vendor 库，因为 ds 是在文件中创建的供消费者调用的全局变量。

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

const globals = {
    DATA_SERVICE: ds,
};

export default globals;

用户.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 或您使用的任何其他 bundler 提供的扩展来捆绑您的 javascript 以将 Q 作为全局提供。

在 webpack 中，这可以通过 webpack.ProvidePlugin

完成

例子:

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

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