Posted in Javascript onFebruary 12, 2020
本文介绍怎么使用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 = 160
bunny.y = 160
app.stage.addChild(bunny);
app.ticker.add((delta) => {
bunny.rotation -= 0.01 * delta;
});
引入webpack
运行git checkout webpack切换到webpack分支即可看到这一步的示例。
- 运行npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge安装依赖。
- 创建webpack.common.js文件，这个是webpack公共配置。
const path = require('path')
module.exports = {
//游戏入口文件
entry: ['./src/js/main.js'],
output: {
//js文件最终发布到哪个路径
path: path.resolve(__dirname, 'dist'),
//注意这个名字和刚才html里面的名字必须一致。
//开发阶段webpack会自动处理这个文件让html引用到，虽然磁盘上不会有这个文件。
//但是最终发布项目的时候会生成这个文件。
filename: 'game.min.js',
},
target: 'web'
}
创建webpack.dev.js文件，这个配置文件用于开发调试阶段。
const path = require('path')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
devtool: 'inline-source-map',
mode: 'none',
devServer: {
//调试时候源代码的位置
contentBase: path.join(__dirname, 'src'),
port: 8080,
host: '0.0.0.0',
hot: true
}
})
创建webpack.prod.js文件，这个配置文件用于发布项目(稍后在引入babel和发布项目步骤再详细介绍，这里暂时先贴出来)，这里配置了babel转码、tree shake和生成source map等。
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
'mode':'production',
devtool: 'source-map',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
'corejs': '3',
'useBuiltIns': 'usage'
}]
],
plugins: ['@babel/plugin-transform-runtime']
}
}
}]
}
})
在package.json中的script配置节增加启动命令。
{
"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",
"scripts": {
"start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js"
},
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"pixi.js": "^5.2.1"
}
}
现已成功引入了webpack，运行npm start启动项目，会自动打开chrome浏览器，我们看到游戏已经跑起来了！尝试修改src/js/main.js文件，保存下，页面会自动刷新，我们的修改也已经能反映到页面上了！
构建项目
运行git checkout master切换到master分支即可看到这最终一步的示例。
- 引入babel让你能使用最新的ES特性（这些库主要是为了ES6+转ES5，还有些pollyfill等等，这里不做过多的解释，具体可参考babel官方文档）。
- npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
- npm install --save core-js @babel/runtime
- 引入gulp，运行npm install --save-dev gulp gulp-if gulp-imagemin rimraf安装依赖。
- 创建gulpfile.js
const {
src,
dest,
parallel
} = require('gulp')
const path = require('path')
const gulpif = require('gulp-if')
const imagemin = require('gulp-imagemin')
const webpack = require('webpack')
const webpack_config = require('./webpack.prod')
function copyAssets() {
return src(['src/**/*', '!src/js/**'])
.pipe(gulpif(
file => path.extname(file.relative) === '.png',
imagemin([imagemin.optipng({
optimizationLevel: 3
})], {
verbose: true
})))
.pipe(dest('dist'))
}
function jsBundle(next) {
const compiler = webpack(webpack_config)
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
console.error(stats.toJson().errors)
}
next()
})
}
exports.dist = parallel(copyAssets, jsBundle)
在package.json中script节加入构建相关命令，然后run npm build就能成功打包了！
{
"name": "pixi-webpack-demo",
"version": "1.0.0",
"description": "make pixi.js game with webpack and gulp",
"main": "src/js/main.js",
"scripts": {
"start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js",
"clean": "rimraf dist",
"prebuild": "npm run clean",
"build": "gulp dist"
},
"author": "yulijun",
"keywords": ["pixi.js","webpack"],
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"rimraf": "^3.0.2",
"gulp": "^4.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^4.1.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@babel/runtime": "^7.8.4",
"core-js": "^3.6.4",
"pixi.js": "^5.2.1"
}
}
恭喜你，至此开发和构建环境已经全部完成，可尝试在源码中添加一些es6+语法，然后运行npm run build构建项目，最终打包好的项目会在dist目录中，js已经被混淆并合并为game.min.js，无用的引用通过tree shake已经被去掉了，包尺寸优化到了最小，而且所有es6+的语法均转换为es5以适应更多的浏览器。所有的图片也都进行了压缩处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
使用webpack搭建pixi.js开发环境
- Author -
于小懒声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@