基于TypeScript的PixiJS开发环境设置（webpack篇）
转自：http://www.limbonova.com/2017/09/setup-pixijs-with-typescript-using-webpack/
前几天写了一篇用Browserify打包的 PixiJS 的开发环境配置流程，但是Web技术一日千里，开发工具也日新月异， Webpack 就是其中之一。本文介绍了以 TypeScript 作为开发语言， PixiJS 作为图形渲染引擎， Webpack 作为模块打包工具的开发环境的配置过程，遵循简化易用的原则，省略了一些非必要模块的安装。
安装
项目结构
- 创建项目目录
mkdir ts_pixi
cd ts_pixi
mkdir assets src dist- 新建项目文件
touch index.html
touch src/main.ts- 初始化项目
npm init安装模块
- PixiJS
npm install --save-dev pixi.js- TypeScript，如果使用Visual Studio Code作为IDE，可以安装相应
@types文件，用于代码提示等功能。
npm install --save-dev typescript @types/pixi.js @types/node- 其它
npm install --save-dev ts-loader webpack webpack-dev-serverts-loaderTypeScript加载器， 用于处理 TypeScript 文件。webpack模块加打包器，将JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。webpack-dev-serverwebpack提供的简易服务器，用于运行调试。也可以选择安装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也去掉。
参考资料
- http://www.proofbyexample.com/typescript-project-setup-with-npm.html
- http://www.proofbyexample.com/typescript-pixi-webpack.html
- https://gist.github.com/mjackson/ecd3914ebee934f4daf4
补充：
1. 升级Nodejs：
sudo npm install -g npm
sudo npm install -g n
sudo n stable"start": "node_modules/.bin/webpack-dev-server --host 0.0.0.0"