带有未定义的导入命名空间的 IIFE 包

Question

我有这个代码：

import * as Phaser from 'phaser';

new Phaser.Game({
    width:300,
    height:300,
    scale: {
        mode: Phaser.Scale.FIT,
    },
    type: Phaser.AUTO,
    scene: { create() {} },
});

当我编译并运行它时，我在包中收到此错误：

Uncaught ReferenceError: Phaser is not defined

rollup.config.js

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/EntryPoint.ts',
  output: {
    file: 'dist/EntryPoint.js',
    format: 'iife',
  },
  plugins: [
    typescript(),
  ],
};

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script src="./dist/EntryPoint.js"></script>
</body>
</html>

package.json

{
  "name": "rollup-import-issue-mvc",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c && sirv --dev --max-age 0 --port 3000",
    "watch": "rollup -c -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.3.2",
    "phaser": "3.55.2",
    "rollup": "^2.72.1",
    "sirv-cli": "^2.0.2",
    "typescript": "^4.6.4"
  }
}

MVC：https://github.com/Klaider/rollupjs-issue-0

这是捆绑包的样子：

(function (Phaser) {
    'use strict';

    // ...

})(Phaser); // line where I get ReferenceError

更新

原来我也得到了：

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
phaser (imported by src/EntryPoint.ts)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
phaser (guessing 'Phaser')

但是 phaser 被指定为 NPM 依赖项。

Answer 1

您将在 link 随警告提供的内容中找到答案：

Warning: "Treating [module] as external dependency"

Rollup will only resolve relative module IDs by default. This means that an import statement like this…
import moment from 'moment';
…won't result in moment being included in your bundle – instead, it will be an external dependency that is required at runtime. If that's what you want, you can suppress this warning with the external option, which makes your intentions explicit:
// rollup.config.js  
export default {  
 entry: 'src/index.js',  
 dest: 'bundle.js',  
 format: 'cjs',  
 external: ['moment'] // <-- suppresses the warning  
};
If you do want to include the module in your bundle, you need to tell Rollup how to find it. In most cases, this is a question of using @rollup/plugin-node-resolve.

Some modules, like events or util, are built in to Node.js. If you want to include those (for example, so that your bundle runs in the browser), you may need to include rollup-plugin-polyfill-node.

所以在你的情况下你必须使用 @rollup/plugin-node-resolve:

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/EntryPoint.ts',
  output: {
    file: 'dist/EntryPoint.js',
    format: 'iife',
  },
  plugins: [
    typescript(),
    nodeResolve()
  ],
};

注意：也许您需要使用 @rollup/plugin-commonjs as stated here

带有未定义的导入命名空间的 IIFE 包

IIFE bundle with imported namespace as undefined

typescript

phaser-framework

rollupjs