本文介紹怎么使用webpack搭建pixi.js游戲的開(kāi)發(fā)環(huán)境，怎么配置babel將ES6+代碼最終轉(zhuǎn)換為ES5，怎么利用gulp將webpack和其他腳本粘合一起優(yōu)化項(xiàng)目并最終發(fā)布項(xiàng)目。
前提
需要會(huì)簡(jiǎn)單使用nodejs，了解package.json，會(huì)簡(jiǎn)單使用npm init，npm install，npm run命令。 需要稍微了解webpack和gulp。 需要有g(shù)oogle chrome瀏覽器。 最好會(huì)一點(diǎn)git，demo項(xiàng)目pixi-webpack-demo托管在github上，通過(guò)切換不同分支演示一步一步項(xiàng)目的構(gòu)建過(guò)程，現(xiàn)在把項(xiàng)目clone下來(lái)吧。為了更容易理解，這里先貼出來(lái)項(xiàng)目最終的目錄結(jié)構(gòu)
.├── 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
構(gòu)建環(huán)境
初始化項(xiàng)目
運(yùn)行g(shù)it checkout init切換到init分支即可看到這一步的示例。
創(chuàng)建目錄pixi-webpack-demo，在pixi-webpack-demo根目錄下運(yùn)行npm init命令初始化項(xiàng)目，按照提示輸入項(xiàng)目信息，完成后生成一個(gè)package.json文件。 運(yùn)行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" }}創(chuàng)建文件src/index.html。
<html> <head> <title>pixi-webpack-demo</title> </head> <body> <canvas id="scene"></canvas> <!-- 注意這里的game.min.js文件，稍微在“引入webpack”步驟詳細(xì)解釋它--> <script type="text/javascript" src="game.min.js" charset="utf-8"></script> </body></html>
創(chuàng)建文件src/js/main.js，這個(gè)文件是游戲入口文件。
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
運(yùn)行g(shù)it checkout webpack切換到webpack分支即可看到這一步的示例。
新聞熱點(diǎn)
疑難解答
圖片精選
