当一个文件需要全局窗口对象时如何捆绑/构建 JavaScript 文件

Question

我用 javascript 编写了一个前端动画，其逻辑被分割到多个 javscript 文件中。我想基于 ES6 模块将这些文件捆绑在一起，至少是我自己编写的文件。

问题是这样的：

import { Webfont } from "webfontloader";

...

function animate(myText){
    WebFont.load({
        google: { families: ["Indie Flower"]},
        fontactive: function(familyName, fvd){ //This is called once font has been rendered in browser
            display(myText);
        },
    });
}

我导入了依赖模块，但是一个模块（webfontloader）包含窗口对象。当它在浏览器中运行时这很好，但是当我使用 npm 和 rollup.js 构建并捆绑它时，它会抛出错误：

   ReferenceError: window is not defined

如何在不接触外部库“webfontloader”的代码的情况下解决这个问题？

我还有两个选择吗？

• 选项 a）将我的所有文件捆绑在一起并将外部库保留在外部。在生产中，它们将作为单独的脚本标签包含在内。
• 选项 b) 将所有文件捆绑到一个文件中

Answer 1

安装global（https://www.npmjs.com/package/global），然后使用rollup-plugin-inject（https://github.com/rollup/rollup-plugin-inject）告诉 rollup 将 的用法替换window为 之一global/window。

// rollup.config.js
import inject from 'rollup-plugin-inject'
export default {
    // ...
    plugins: [
        inject({
            include: 'node_modules/webfontloader/**',
            window: 'global/window'
        })
    ]