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

Posted 2023-03-23

【中文标题】将代码库从 Webpack 移植到 Rollup 时，某些类在本应出现时未导出的问题

【英文标题】：Problems with some classes not exporting when it should have arose when porting codebase from Webpack to 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 自己的答案 (***.com/a/45787251/10916748)，但不管有没有treeshake: false

，它都不起作用

【参考方案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>