基于TypeScript的PixiJS开发环境设置（browserify篇）

Posted on Sep 18, 2017

PixiJS 作为一款出色的WebGL 2D渲染引擎，除了支持JavaScript之外，还支持 TypeScript 。 TypeScript 的优点不言而喻，支持静态类型检查，IDE代码提示，具有较好的可读性。所以用来替代JavaScript开发项目，也有利于将来的代码重构。本文介绍了以 TypeScript 作为开发语言， PixiJS 作为图形渲染引擎， Browserify 作为模块打包工具的开发环境的配置过程。

前提

不可或缺的当然是node。

node --version

安装

初始化项目

mkdir ts_pixi
cd ts_pixi
mkdir assets src dist

新建项目文件

touch index.html
touch src/main.ts

初始化项目

npm init

安装模块

PixiJS

npm install --save pixi.js

TypeScript

npm install --save-dev typescript

其它

npm install --save-dev browserify browserify-shim http-server tsify tslint

tslint TypeScript代码风格控制工具，用于辅助执行编码规范，控制代码质量。
browserify 模块加载和打包工具，参照了Node中的模块系统，约定用require()来引入其他模块，用module.exports来引出模块。
Browserify-Shim 模块转换器，把非 CommonJS 的模块转换成 CommonJS 模块。同时可以通过全局变量暴露模块文件所提供的公开接口。
tsify Browserify的插件，能够访问TypeScript编译器，让Browserify能够处理TypeScript文件。
http-server 简单易用的http服务器，用于运行调试，也可以选择安装live-server。

如果使用Visual Studio Code作为IDE，可以安装以下@types文件，用于代码提示等功能。

npm install --save-dev @types/pixi.js @types/node

初始化模块

生成 tsconfig.json

node_modules/.bin/tsc --init

生成 tslint.json

node_modules/.bin/tslint --init

设置

package.json 设置

配置scripts中的构建和测试命令，并增加browserify-shim的配置。

{
  "name": "ts_pixi",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
	"build": "node browserify.js > dist/bundle.js",
    "test": "node_modules/.bin/http-server -c-1"
  },
  "browserify-shim": {
    "pixi": "global:PIXI"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "pixi.js": "^4.5.6"
  },
  "devDependencies": {
    "@types/node": "^8.0.28",
    "@types/pixi.js": "^4.5.4",
    "browserify": "^14.4.0",
    "browserify-shim": "^3.8.14",
    "http-server": "^0.10.0",
    "tsify": "^3.0.3",
    "tslint": "^5.7.0",
    "typescript": "^2.5.2"
  }
}

browserify.js设置

在项目根目录下新建新建文件browserify.js

touch browserify.js

修改文件内容为

var browserify = require('browserify');
var tsify = require('tsify');

browserify()
    .add('src/main.ts')
    .plugin(tsify, { project: '.' })
    .transform('browserify-shim')
    .bundle()
    .on('error', function (error) { console.error(error.toString()); })
    .pipe(process.stdout);

测试

修改文件

main.ts

写一段测试代码，如下所示：

import * as PIXI from "pixi.js";

//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);

//Create a container object called the `stage`
var stage = new PIXI.Container();

//Tell the `renderer` to `render` the `stage`
renderer.render(stage);

index.html

修改文件内容为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World, Pixi!</title>
    </head>
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

编译测试

编译

npm run build

此举将会执行package.json中设置的build命令，编译TypeScript文件，并打包至dist/bundle.js中

测试

npm test

执行命令，打开相应的网址，测试刚刚编写的代码，查看代码是否正确执行。

总结

不熟悉 node.js 开发，配置的时候遇到了不少问题，不过也都很快解决了。相比 Native 的开发，Web 的工具实在太好用了，很适合前期的原型构建。

参考资料