webpack - ReferenceError:未定义移相器
问题描述
我有这个 src/index.html 文件:。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making your first Phaser 3 Game - Part 1</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}
function create ()
{
this.add.image(400, 300, 'sky');
}
function update ()
{
}
</script>
</body>
</html>
我有这个 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const config = {
entry: './src/scripts/main.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: {
loader: 'file-loader?name=/src/assets/[name].[ext]',
options: {
name: '[name].[hash].[ext]',
outputPath: 'assets/',
},
},
},
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
output: {
path: path.resolve(
__dirname,
'dist',
),
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
template: './src/index.html',
}),
],
};
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'source-map';
config.output.filename = 'main.bundle.js';
}
if (argv.mode === 'production') {
config.plugins.push(new CleanWebpackPlugin());
config.output.filename = 'main.[hash].bundle.js';
}
return config;
};
当我在项目根目录中并输入:
npx webpack --mode development
它在项目的根目录中创建一个 dist/index.html 文件
我用我的网络浏览器(firefox)打开文件,我得到这个输出
它无法识别 index.html 文件中的“Phaser”命令
检查 index.html 文件中的这一行:
var game = new Phaser.Game(config);
这是怎么回事?我怎样才能解决这个问题?如果您需要更多信息,请询问我会扩展以便您提供帮助。
这是我在提出问题时正在工作的功能分支中的存储库
解决方案
从 index.html 文件中提取 javascript 并创建一个 .js 文件,该文件由 webpack 导入到 html 中
import Phaser from 'phaser';
function preload() {
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 });
}
function create() {
this.add.image(400, 300, 'sky');
}
function update() {
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload,
create,
update,
},
};
// eslint-disable-next-line no-unused-vars
const game = new Phaser.Game(config);
检查 .js 文件的第一行
import Phaser from 'phaser';
推荐阅读
- user-interface - 寻找构建图形对象并与它们交互的方向
- sql - 如何根据 SQL 中同一行中的第二个值将值设置为 null?
- java - 更改列表视图中复选框的文本颜色
- npm - 无法使用 Angular CLI 创建应用程序:在“...bgwj8Xr2oElY7PTvOKwwu”附近解析时 JSON 输入意外结束
- c# - 如何将大数据(> 100 万)导出到 excel 文件仅使用 interop.excel
- multithreading - 是否可以将 Mutex 的引用传递给新线程?我们是否总是需要使用 move 来关闭?
- python - 长度为 1 的字符串的索引超出范围
- openlayers-6 - 在 OpenLayers 中加载和渲染的最有效的矢量源格式?
- r - 在 R 中解析 ascii-art
- mysql - 充当 PK 和 FK(子类型关系)的列命名约定