转自: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-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 的<scrpt>
标签从外部加载。那么就需要在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
2. webpack-dev-server 外网访问,修改package.json:
"start": "node_modules/.bin/webpack-dev-server --host 0.0.0.0"