基于TypeScript的PixiJS开发环境设置(webpack篇)

转自:http://www.limbonova.com/2017/09/setup-pixijs-with-typescript-using-webpack/

前几天写了一篇用Browserify打包的 PixiJS 的开发环境配置流程,但是Web技术一日千里,开发工具也日新月异, Webpack 就是其中之一。本文介绍了以 TypeScript 作为开发语言, PixiJS 作为图形渲染引擎, Webpack 作为模块打包工具的开发环境的配置过程,遵循简化易用的原则,省略了一些非必要模块的安装。

安装

项目结构

  1. 创建项目目录
mkdir ts_pixi
cd ts_pixi
mkdir assets src dist
  1. 新建项目文件
touch index.html
touch src/main.ts
  1. 初始化项目
npm init

安装模块

  1. PixiJS
npm install --save-dev pixi.js
  1. TypeScript,如果使用Visual Studio Code作为IDE,可以安装相应@types文件,用于代码提示等功能。
npm install --save-dev typescript @types/pixi.js @types/node
  1. 其它
npm install --save-dev ts-loader webpack webpack-dev-server
  • ts-loader TypeScript加载器, 用于处理 TypeScript 文件。
  • webpack 模块加打包器,将JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
  • webpack-dev-server webpack提供的简易服务器,用于运行调试。也可以选择安装http-server或者live-server

初始化模块

生成 tsconfig.json

node_modules/.bin/tsc --init

设置

package.json 设置

配置scripts中的构建和测试命令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "ts_pixi",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server",
    "build": "node_modules/.bin/webpack",
    "build:watch": "node_modules/.bin/webpack -w",
    "clean": "rm ./dist/*"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "pixi.js": "^4.5.6"
  },
  "devDependencies": {
    "@types/node": "^8.0.29",
    "@types/pixi.js": "^4.5.4",
    "source-map-loader": "^0.2.1",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

tsconfig.json 设置

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es5"
  },
  "filesGlob": [
    "./src/*.ts"
  ]
}

webpack.config.js 设置

在项目根目录下创建webpack.config.js文件,并加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const path = require("path");
module.exports = {
    entry: "./src/main.ts",
    output: {
        filename: "./dist/bundle.js"
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "inline-source-map",
    resolve: {
        // Add '.ts' as resolvable extensions.
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ["ts-loader"]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "."),
        compress: true,
        port: 8080
    },
    // Omit "externals" if you don't have any. Just an example because it's
    // common to have them.
    externals: {
        // Don't bundle giant dependencies, instead assume they're available in
        // the html doc as global variables node module name -> JS global
        // through which it is available
       //"pixi.js": "PIXI"
    }
};

需要注意的是,使用vs code chrome debug插件调试时,devtool需要配置为inline-source-map,否则断点命中有问题。
如果有些第三方的JS库较大,比如 PixiJS,可以考虑不用webpack打包,而通过 HTML 的标签从外部加载。那么就需要在externals选项中启用,并在html中包含对应的 JavaScript 文件。

测试

修改文件

main.ts

写一段测试代码,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

修改文件内容为

1
2
3
4
5
6
7
8
9
10

<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 run start

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

总结

Web 技术更新很快,Webpack 3.6 已经发布了, 而网上的很多资料还停留在 1.x, 2.x 的时代,PixiJS也更新到了 4.5.6,环境配置也不再像以前那么复杂。但是 Web 前端的发展实在是太快,重复造的“轮子”也是花样百出,让人目不暇接。“若无必要,勿增实体”,引入更多的模块会产生更多的问题,如果将来重新配置环境,可以考虑将Webpack也去掉。


参考资料

  1. http://www.proofbyexample.com/typescript-project-setup-with-npm.html
  2. http://www.proofbyexample.com/typescript-pixi-webpack.html
  3. https://gist.github.com/mjackson/ecd3914ebee934f4daf4

补充:

1. 升级Nodejs:

sudo npm install -g npm
sudo npm install -g n
sudo n stable
2. webpack-dev-server 外网访问,修改package.json:
"start": "node_modules/.bin/webpack-dev-server --host 0.0.0.0"


你可能感兴趣的:(基于TypeScript的PixiJS开发环境设置(webpack篇))