汇总模块但保留所有变量全局

Question

我会针对我的问题简化代码。所以让我们假设我有

module1.js

export class MyClass { };

在

index.js

import { MyClass } from './module1.js'

var X = MyClass();

接下来我想将

index.js

与 rollup 捆绑在一起，结果文件内容应该如下所示

class MyClass { };
var X = MyClass();

我的目标是将结果文件放入

script

标签，并能够访问全局空间中所有声明的变量，例如

window.MyClass

和

window.X

来自其他脚本。

是否有任何用于此目的的汇总选项或插件？

Answer 1

我不确定这是否是您正在寻找的答案，但有一个名为

rollup-plugin-inject

的 Rollup 插件可以帮助您实现这一目标。

在 NPM 中使用这个命令

npm install @rollup/plugin-inject --save-dev

创建

rollup.config.js

配置文件并导入插件：

import inject from 'rollup-plugin-inject';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    inject({
      MyClass: ['default', 'MyClass']
    })
  ]
};

使用此配置运行 Rollup 后，生成的 bundle.js 文件应包含以下代码：

class MyClass { };
var X = MyClass();
window.MyClass = MyClass;
window.X = X;

然后您可以使用脚本标签在 HTML 中包含 bundle.js 文件，您应该能够分别使用 window.MyClass 和 window.X 从其他脚本访问 MyClass 和 X 变量。

https://github.com/rollup/plugins/tree/master/packages/inject