使用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以适应更多的浏览器。全部的图片也都进行了压缩处理。

结尾

有什么不明白的或者不一样的意见欢迎在评论区留言。

项目里之因此引用到gulp是由于没有找到webpack优化图片的插件，若是有小伙伴知道好用的插件，请务必不要吝啬，留言给我。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程