使用webpack搭建pixi.js開發環境

時間 2020-02-12

標籤使用 webpack 搭建 pixi.js pixi 開發環境欄目 JavaScript 简体版

原文原文鏈接

本文介紹怎麼使用 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下來吧。

爲了更容易理解，這裏先貼出來項目最終的目錄結構javascript

.
├── 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文件以下所示：html

{
  "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，這個文件是遊戲入口文件。java

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公共配置。node

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文件，這個配置文件用於開發調試階段。webpack

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等。git

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配置節增長啓動命令。es6

{
  "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官方文檔）。github
- 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.jsweb

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以適應更多的瀏覽器。全部的圖片也都進行了壓縮處理。