在将代码库从Webpack移植到Rollup时，出现了一些类没有导出的问题

Question

因此，出于性能和代码大小的原因，我正在将一个旧的2017年代码库从Webpack移植到Rollup，也因为代码库使用了旧的依赖项。

不幸的是，新的Rollup版本有一个问题，我无法找到解决方案。它似乎没有导出一些类(在本例中是Engine和BackgroundLayer)，但Webpack未修改的版本可以。这有什么原因吗?

所讨论的Error:

Uncaught ReferenceError: Engine is not defined

这是我的rollup.config.js

import arraybuffer from '@wemap/rollup-plugin-arraybuffer';
import { babel } from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import pkg from './package.json';
import resolve from "@rollup/plugin-node-resolve";
// import { terser } from "rollup-plugin-terser";
export default {
input: "src/index.js",
output: {
name: "index",
file: `dist/${pkg.name}.js`,
format: "umd",
},
external: ['ms'],
plugins: [
arraybuffer({ include: '**/*.dat' }), // so Rollup can import .dat files
resolve(), // so Rollup can find `ms`
commonjs(), // so Rollup can convert `ms` to an ES module
// terser(), // minifying
// babel configuration
babel({ exclude: 'node_modules/**', babelHelpers: "runtime", skipPreflightCheck: true }),
]
}

如果有人需要完整的代码库，这里有两个版本:

Webpack代码:https://github.com/kdex/earthbound-battle-backgrounds

汇总代码:https://github.com/IamRifki/earthbound-battle-backgrounds-rollup

Answer 1

明白了，我必须在module中调用bundle.js:

index.html

<script type="module">
import { BackgroundLayer, Engine } from "./bundle.js";
const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]);
engine.animate();
</script>