使用webpack搭建pixi.js开发环境

2024-05-06 15:44:24

字体：大中小

来源：转载

供稿：网友

本文介绍怎么使用webpack搭建pixi.js游戏的开发环境，怎么配置babel将ES6+代码最终转换为ES5，怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目。

前提

需要会简单使用nodejs，了解package.json，会简单使用npm init，npm install，npm run命令。需要稍微了解webpack和gulp。需要有google chrome浏览器。最好会一点git，demo项目pixi-webpack-demo托管在github上，通过切换不同分支演示一步一步项目的构建过程，现在把项目clone下来吧。

为了更容易理解，这里先贴出来项目最终的目录结构

.├── dist│  ├── index.html│  ├── game.min.js│  └── assets│    └── bunny.png├── src│  ├── index.html│  ├── assets│  │  └── bunny.png│  └── js│    ├── main.js│    └── scene.js├── gulpfile.js├── package.json├── webpack.common.js├── webpack.dev.js└── webpack.prod.js

构建环境

nodejs：需要node环境，前端项目现在基本都是基于node项目创建的，node的包管理系统和工具链很方便。 git：非必须，看demo时候切分支用。

初始化项目

运行git checkout init切换到init分支即可看到这一步的示例。

创建目录pixi-webpack-demo，在pixi-webpack-demo根目录下运行npm init命令初始化项目，按照提示输入项目信息，完成后生成一个package.json文件。运行npm install --save pixi.js安装依赖。完成上面两步，package.json文件如下所示：

{ "name": "pixi-webpack-demo", "version": "1.0.0", "description": "make pixi.js game with webpack and gulp", "main": "src/js/main.js", "keywords": ["pixi.js","webpack"], "author": "yulijun", "license": "MIT", "dependencies": {  "pixi.js": "^5.2.1" }}

创建文件src/index.html。

<html> <head>  <title>pixi-webpack-demo</title> </head> <body> <canvas id="scene"></canvas>  <!-- 注意这里的game.min.js文件，稍微在“引入webpack”步骤详细解释它-->  <script type="text/javascript" src="game.min.js" charset="utf-8"></script> </body></html>

创建文件src/js/main.js，这个文件是游戏入口文件。

import * as PIXI from 'pixi.js'const app = new PIXI.Application({ width: 720, height: 1280, backgroundColor: 0x1099bb, view: document.querySelector('#scene')});const texture = PIXI.Texture.from('assets/bunny.png');const bunny = new PIXI.Sprite(texture);bunny.anchor.set(0.5);bunny.x = 160bunny.y = 160app.stage.addChild(bunny);app.ticker.add((delta) => { bunny.rotation -= 0.01 * delta;});

引入webpack

运行git checkout webpack切换到webpack分支即可看到这一步的示例。

上一篇：JavaScript 替换所有匹配内容及正则替换方法

下一篇：linux 下以二进制的方式安装 nodejs