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

2023-08-01 17:54:03 215

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

前提

需要会简单使用nodejs，了解package.json，会简单使用npminit，npminstall，npmrun命令。
需要稍微了解webpack和gulp。
需要有googlechrome浏览器。
最好会一点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时候切分支用。

初始化项目

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

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

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

创建文件src/index.html。



pixi-webpack-demo

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

import*asPIXIfrom'pixi.js'

constapp=newPIXI.Application({
width:720,
height:1280,
backgroundColor:0x1099bb,
view:document.querySelector('#scene')
});

consttexture=PIXI.Texture.from('assets/bunny.png');
constbunny=newPIXI.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

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

运行npminstall--save-devwebpackwebpack-dev-serverwebpack-cliwebpack-merge安装依赖。
创建webpack.common.js文件，这个是webpack公共配置。

constpath=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文件，这个配置文件用于开发调试阶段。

constpath=require('path')
constmerge=require('webpack-merge')
constcommon=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转码、treeshake和生成sourcemap等。

constmerge=require('webpack-merge')
constcommon=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":"makepixi.jsgamewithwebpackandgulp",
"main":"src/js/main.js",
"keywords":["pixi.js","webpack"],
"author":"yulijun",
"license":"MIT",
"scripts":{
"start":"webpack-dev-server--open'googlechrome'--configwebpack.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，运行npmstart启动项目，会自动打开chrome浏览器，我们看到游戏已经跑起来了！尝试修改src/js/main.js文件，保存下，页面会自动刷新，我们的修改也已经能反映到页面上了！

构建项目

运行gitcheckoutmaster切换到master分支即可看到这最终一步的示例。

引入babel让你能使用最新的ES特性（这些库主要是为了ES6+转ES5，还有些pollyfill等等，这里不做过多的解释，具体可参考babel官方文档）。
- npminstall--save-dev@babel/core@babel/plugin-transform-runtime@babel/preset-envbabel-loader
- npminstall--savecore-js@babel/runtime
引入gulp，运行npminstall--save-devgulpgulp-ifgulp-imageminrimraf安装依赖。
创建gulpfile.js

const{
src,
dest,
parallel
}=require('gulp')
constpath=require('path')
constgulpif=require('gulp-if')
constimagemin=require('gulp-imagemin')
constwebpack=require('webpack')
constwebpack_config=require('./webpack.prod')

functioncopyAssets(){
returnsrc(['src/**/*','!src/js/**'])
.pipe(gulpif(
file=>path.extname(file.relative)==='.png',
imagemin([imagemin.optipng({
optimizationLevel:3
})],{
verbose:true
})))
.pipe(dest('dist'))
}

functionjsBundle(next){
constcompiler=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节加入构建相关命令，然后runnpmbuild就能成功打包了！

{
"name":"pixi-webpack-demo",
"version":"1.0.0",
"description":"makepixi.jsgamewithwebpackandgulp",
"main":"src/js/main.js",
"scripts":{
"start":"webpack-dev-server--open'googlechrome'--configwebpack.dev.js",
"clean":"rimrafdist",
"prebuild":"npmrunclean",
"build":"gulpdist"
},
"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+语法，然后运行npmrunbuild构建项目，最终打包好的项目会在dist目录中，js已经被混淆并合并为game.min.js，无用的引用通过treeshake已经被去掉了，包尺寸优化到了最小，而且所有es6+的语法均转换为es5以适应更多的浏览器。所有的图片也都进行了压缩处理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐