溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么使用webpack搭建pixi.js開發(fā)環(huán)境

發(fā)布時間：2021-02-07 11:33:05 來源：億速云 閱讀：231 作者：小新 欄目：web開發(fā)

這篇文章主要介紹怎么使用webpack搭建pixi.js開發(fā)環(huán)境，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

前提

  • 需要會簡單使用nodejs，了解package.json，會簡單使用npm init，npm install，npm run命令。

  • 需要稍微了解webpack和gulp。

  • 需要有g(shù)oogle chrome瀏覽器。

  • 最好會一點git，demo項目pixi-webpack-demo托管在github上，通過切換不同分支演示一步一步項目的構(gòu)建過程，現(xiàn)在把項目clone下來吧。

為了更容易理解，這里先貼出來項目最終的目錄結(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)境

  • nodejs：需要node環(huán)境，前端項目現(xiàn)在基本都是基于node項目創(chuàng)建的，node的包管理系統(tǒng)和工具鏈很方便。

  • git：非必須，看demo時候切分支用。

初始化項目

運行g(shù)it checkout init切換到init分支即可看到這一步的示例。

  • 創(chuàng)建目錄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"
 }
}

創(chuàng)建文件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>

創(chuàng)建文件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

運行g(shù)it checkout webpack切換到webpack分支即可看到這一步的示例。

  1. 運行npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge安裝依賴。

  2. 創(chuàng)建webpack.common.js文件，這個是webpack公共配置。

const path = require('path')
module.exports = {
 //游戲入口文件
 entry: ['./src/js/main.js'],
 output: {
  //js文件最終發(fā)布到哪個路徑
  path: path.resolve(__dirname, 'dist'),
  
  //注意這個名字和剛才html里面的名字必須一致。
  //開發(fā)階段webpack會自動處理這個文件讓html引用到，雖然磁盤上不會有這個文件。
  //但是最終發(fā)布項目的時候會生成這個文件。
  filename: 'game.min.js',
 },
 target: 'web'
}

創(chuàng)建webpack.dev.js文件，這個配置文件用于開發(fā)調(diào)試階段。

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: {
  //調(diào)試時候源代碼的位置
  contentBase: path.join(__dirname, 'src'),
  port: 8080,
  host: '0.0.0.0',
  hot: true
 }
})

創(chuàng)建webpack.prod.js文件，這個配置文件用于發(fā)布項目(稍后在引入babel和發(fā)布項目步驟再詳細介紹，這里暫時先貼出來)，這里配置了babel轉(zhuǎn)碼、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配置節(jié)增加啟動命令。

{
 "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"
 }
}

現(xiàn)已成功引入了webpack，運行npm start啟動項目，會自動打開chrome瀏覽器，我們看到游戲已經(jīng)跑起來了！嘗試修改src/js/main.js文件，保存下，頁面會自動刷新，我們的修改也已經(jīng)能反映到頁面上了！

構(gòu)建項目

運行g(shù)it checkout master切換到master分支即可看到這最終一步的示例。

  • 引入babel讓你能使用最新的ES特性（這些庫主要是為了ES6+轉(zhuǎn)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安裝依賴。

  • 創(chuàng)建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節(jié)加入構(gòu)建相關(guān)命令，然后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"
 }
}

恭喜你，至此開發(fā)和構(gòu)建環(huán)境已經(jīng)全部完成，可嘗試在源碼中添加一些es6+語法，然后運行npm run build構(gòu)建項目，最終打包好的項目會在dist目錄中，js已經(jīng)被混淆并合并為game.min.js，無用的引用通過tree shake已經(jīng)被去掉了，包尺寸優(yōu)化到了最小，而且所有es6+的語法均轉(zhuǎn)換為es5以適應(yīng)更多的瀏覽器。所有的圖片也都進行了壓縮處理。

以上是“怎么使用webpack搭建pixi.js開發(fā)環(huán)境”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手