当一个文件需要一个全局 window 对象时如何 bundle/build 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) 包含 window 对象。当它在浏览器中运行时这很好，但是当我构建它并将其与 npm und rollup.js 捆绑在一起时，它会抛出错误：

   ReferenceError: window is not defined

如何在不触及作为外部库的 "webfontloader" 代码的情况下解决这个问题？

我有两个选择吗？

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

Answer 1

安装 global (https://www.npmjs.com/package/global) then use 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'
        })
    ]

当一个文件需要一个全局 window 对象时如何 bundle/build javascript 文件

How to bundle/build javascript files when one file expects a global window object

javascript

rollupjs

es6-modules