Question

我正在研究PWA。为了提高加载性能（即Lighthouse评分），我需要首先呈现一个轻量级的“ loading，please wait”页面，等待服务人员缓存应用程序代码和数据包，然后通过脚本标签动态加载该包。。但是，应用程序的两个阶段都共有一个ES模块。

通用模块（EventBus.js）的简化版本是：

class EventBus {
  constructor() {}
  publish() {}
  subscribe() {}
}
let bus = new EventBus();
export { bus };

在bundle模块中，有许多对bus的引用，如下所示：

import { bus } from '../EventBus.js';
...
bus.publish(...);

因此，我需要通过带有初始“请稍候”页面的脚本标签加载EventBus.js，然后在捆绑包中提供全局bus引用。

我已经对rollup.config.js进行了尝试：

import path from 'path';
const externalId = path.resolve(__dirname, './js/EventBus.js');
export default {
  input: './js/App.js',
  external: [externalId],
  output: {
    file: './bundle.js',
    format: 'iife',
    globals: {
      [externalId]: 'EventBus.bus'
    }
  }
};

生成的捆绑包是这样的：

(function (EventBus_js) {
...
EventBus_js.bus.publish(...)
...
}(EventBus.bus));

这将解决如下呼叫：

...
EventBus.bus.bus.publish(...);
...

这绝对不是我的追求！

我要查找的捆绑软件如下所示：

(function (bus) {
...
bus.publish(...)
...
}(bus));

我在这里做什么错了？

汇总和全局变量

0 个答案: