【Phaser+Ts+Webpack】手把手教你使用phaser-基础框架搭建篇新年第一天来一年ts加webpack的p

这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战

基础框架搭建篇

为什么出一个Phaser的教程

新年第一天，没什么事自己就去看了一下JS的H5游戏引擎和框架，市面上的集成比较好的就是layabox、cocos2d、白鹭等，相比较Phaser有完整的编辑器、自己的可视化界面，但是对于我们前端来说，学习这些成本太高，并且不一定有很好的兼容性，相反Phaser并不能算是一个游戏引擎，只能算是一个js库，但是它很小，并且引入灵活，可以单页使用，也可以直接引入js文件使用，并且它是使用webGL或者Canvas渲染的，性能比较好，也有市面上常用引擎的大部分功能，比如说物理引擎、纹理贴图等，但是Phaser并没有中文文档，而且没有一个好一点的教程，因此我才考虑出一个Phaser系列教程，旨在于自己学习记录，并且能帮助一些喜欢游戏，又有自己想法的，想写一个游戏的前端摸鱼工程师们。

本系列教程工具以及语言版本

typescript v4.5.2
webpack v5.64.2
webpack-cli v4.9.1
ts-loader v9.2.6
phaser v3.55.2

正文开始

1、初始化npm并且安装typescript和webpack

随便找个地方创建个文件夹，然后分别运行一下命令：

npm init -y

npm install typescript webpack webpack-cli ts-loader phaser live-server -D

安装成功之后你创建的文件夹下面会有一个package.json文件，打开里面是这样：

{
  "name": "phaser-teach",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "live-server": "^1.2.1",
    "phaser": "^3.55.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1"
  }
}

注意：如果你安装的版本和我的不一样，建议你直接拷贝我package.json文件，然后直接运行npm install

这里建议去掉下面依赖包版本前面的^，固定版本，然后删除scripts脚本下面的test命令，然后将main下面的index.js改为index.ts
在文件夹根目录创建src文件夹作为我们项目的源码文件夹
文件夹根目录新增webpack.config.js文件，并在里面新增如下配置：
- entry：告诉webpack从哪个目录开始编译
- rules：webpack的打包规则，可以配置多个规则
- extensions：对什么文件进行打包编译
- output：打包之后的输出文件路径
- mode：当前开发模式，有需要多环境的可以使用cross-env实现多环境打包

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js' ]
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

初始化typescript配置文件

tsc -init

当你初始化完成之后，里面应该有一堆配置项，我们可以先不用管它，可以直接复制我的配置覆盖上去，具体配置项的说明大家可以在官网查看

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  },
  "include": [
    "src/*"
  ],
  "exclude": []
}

当你保存之后你的tsconfig.json文件可能会报这个错： 在配置文件“.../phaser-teach/tscor fig.json"中找不到任何输入。指定的"include"路径为“["src/*"]”，"exclude"路径为“[]”, 这个时候在src目录下创建一个index.ts文件，就会解决报错。

phaser-teach
├── package-lock.json
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── webpack.config.js

2、启动项目

启动项目我们要使用webpack来启动，并实现热更新，在项目根目录创建index.html文件，并且在package.json中配置下面的脚本：

{
  "name": "phaser-teach",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "build": "webpack",
    "start": "webpack --watch & live-server --port=6868"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "live-server": "1.2.1",
    "phaser": "3.55.2",
    "ts-loader": "9.2.6",
    "typescript": "4.5.2",
    "webpack": "5.64.2",
    "webpack-cli": "4.9.1"
  }
}

在index.html文件中输入一个hello world，运行npm run start，如果你的代码没问题，live-server会自动打开浏览器并且页面上面会显示hello world，并且会在你项目目录下面生成一个dist文件夹

3、引入编译之后的js文件

在刚刚新建的index.html文件中删除刚才的hello world并加入js引用：

<script src="./dist/app.js"></script>

在src/index.ts中输入下面代码：

console.log('hello world');

运行命令npm run start，打开浏览器控制台，会显示hello world。

引入HtmlWebpackPlugin 使用引入HtmlWebpackPlugin插件，简化每次打包都需要手动引入js文件

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

运行命令安装插件：

npm install --save-dev html-webpack-plugin

删除node_nodules文件夹，并修改package.json文件：

{
  "name": "phaser-teach",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "5.5.0",
    "phaser": "3.55.2",
    "ts-loader": "9.2.6",
    "typescript": "4.5.2",
    "webpack": "5.64.2",
    "webpack-cli": "4.9.1",
    "webpack-dev-server": "4.6.0"
  },
  "dependencies": {}
}

运行npm install重新安装依赖，安装成功之后，在文件夹根目录创建public文件夹，删除根目录index.html文件，在public文件夹创建新的index.html文件作为模板文件并且修改webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  devServer: {
    static: {
      directory: path.join(__dirname, './'),
    },
    compress: true,
    port: 6688,
    open: false,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js' ]
  },
  output: {
    filename: 'index_bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      hash: true
    })
  ],
  mode: 'development'
};

运行npm run start，打开浏览器控制台会打印hello world;运行npm run build，会在项目根目录生成一个dist文件夹，说明你的配置成功了！

最后一步首先是不在使用live-server进行打包，而是使用webpack-dev-server进行热更新；使用HtmlWebpackPlugin插件来解决不用每次打包都需要创建index.html文件并手动引入打包之后的js文件。

注意: 在运行打包命令时候，如果报webpack命令不存在，大家可以运行 npm install webpack webpack-cli -g 命令进行全局安装。

4、最后

到这里基础框架搭建就完成了，下一节会开始Phaser的正式教程，后面的教程会带你一步一步了解phaser的常用api。本节的源码项目地址在这里。

【Phaser+Ts+Webpack】手把手教你使用phaser-基础框架搭建篇