基于TypeScript的PixiJS开发环境设置(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中的构建和测试命令。
{
"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 设置
{
"compilerOptions": {
"strictNullChecks": true,
"noImplicitAny": true,
"outDir": "./dist/",
"sourceMap": true,
"target": "es5"
},
"filesGlob": [
"./src/*.ts"
]
}
webpack.config.js 设置
在项目根目录下创建webpack.config.js
文件,并加入以下内容:
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
写一段测试代码,如下所示:
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 run start
执行命令,打开相应的网址,测试刚刚编写的代码,查看代码是否正确执行。
总结
Web 技术更新很快,Webpack 3.6 已经发布了, 而网上的很多资料还停留在 1.x, 2.x 的时代,PixiJS也更新到了 4.5.6,环境配置也不再像以前那么复杂。但是 Web 前端的发展实在是太快,重复造的“轮子”也是花样百出,让人目不暇接。“若无必要,勿增实体”,引入更多的模块会产生更多的问题,如果将来重新配置环境,可以考虑将Webpack
也去掉。
参考资料