将代码库从 Webpack 移植到 Rollup 时，某些类在本应出现时未导出的问题答案

【问题标题】：Problems with some classes not exporting when it should have arose when porting codebase from Webpack to Rollup将代码库从 Webpack 移植到 Rollup 时，某些类在本应出现时未导出的问题
【发布时间】：2021-12-13 17:58:19
【问题描述】：

因此，出于性能和代码大小的原因，我将 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

【问题讨论】：

我认为 Rollup 正在摇动你的函数，因为它们没有在你的代码库中使用，只通过你的 index.js 导出。
似乎 Treeshaking 可能不是问题。尝试在rollup.config.js 中使用treeshake: false，但它仍然没有导出必要的类。我也在这里尝试了 Rich Harris 自己的答案 (stackoverflow.com/a/45787251/10916748)，但不管有没有treeshake: false，它都不起作用

标签： javascript node.js webpack porting rollupjs

【解决方案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>

【讨论】：