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


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分支即可看到这一步的示例。

  1. 运行npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge安装依赖。
  2. 创建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以适应更多的浏览器。所有的图片也都进行了压缩处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
js Array.slice的8种不同用法示例
Jul 10 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
vant 中van-list的用法说明
Nov 11 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
十分钟教你上手ES2020新特性
Feb 12 #Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 #Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 #Javascript
浅析vue-router实现原理及两种模式
Feb 11 #Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 #Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 #Javascript
You might like
PHP 代码规范小结
2012/03/08 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php curl的深入解析
2013/06/02 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
React Router基础使用
2017/01/17 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python动态性强类型用法实例
2015/05/09 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python3 logging日志封装实例
2020/04/08 Python
深入浅析Python代码规范性检测
2020/07/31 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server