將代碼庫從 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>