Pixi.js TypeScript Webpack

创建项目，使用npm init初始化项目，也可使用npm init -y使用默认配置初始化项目。

$ mkdir pixits
$ npm init

创建文件结构

$ mkdir pixits && cd pixits

TypeScript

$ npm i -D typescript
$ mkdir src

TypeScript是JavaScript的超集，编译器是tsc，tsc命令工具可以将.ts文件编译成为.js文件。

Webpack中使用TypeScript需使用ts-loader插件

$ tsc src/main.ts --target es5 --watch

通常使用中不会直接在命令行中使用，而会在项目根目录下创建tsconfig.json文件来配置tsc编译器的相关选项。

初始化TypeScript模块，根目录下生成tsconfig.json配置文件。

$ node_modules/.bin/tsc --init
$ vim tsconfig.json

TypeScript配置文件tsconfig.json中常用配置分为compilerOptions、include、exclude三项

• compilerOptions 表示TypeScript编译器选项
• include 表示使用ts-loader加载解析的TypeScript文件路径
• exclude 表示禁止使用ts-loader加载解析的文件路径

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "declaration":false,
    "typeRoots":["node_modules/@type"],
    "baseUrl":"./src/",
    "paths": {
      "@app/*" : ["app/*"],
      "@models/*": ["models/*"],
      "@assets/*": ["assets/*"]
    }
  },
  "include":["./src/*"],
  "exclude":["./node_modules"]
}

compilerOptions编译器选项

• target 指定ECMAScript目标版本
• module 指定生成哪个模块系统代码
• allowJs 是否允许使用JS编码

Webpack

安装项目构建工具

webpack是一个模块打包工具，可见需要松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，将按需加载的模块进行代码分割，等实际需要使用时再异步加载。

webpack的工作方式是将项目作为一个整体，通过一个给定的主文件，从主文件开始寻找项目所有的依赖文件，通过对应loader加载器处理后再打包成为一个或多个浏览器可以识别的JavaScript文件。

webpack4需安装webpack、webpack-cli、typescript等必要的模块，为了使webpack处理typescript还需安装ts-loader。

$ npm i -D webpack
$ npm i -D webpack-cli
$ npm i -D webpack-dev-server

插件	描述
webpack	模块打包器，将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。
webpack-cli	webpack命令行脚手架工具
webpack-dev-server	WebPack服务器哟关于调试，也可选择http-server或live-server等。
ts-loader	TypeScript加载器用于处理TypeScript文件

ts-loader

由于webpack自身只能理解JavaScript，处理TypeScript文件时需安装ts-loader。

$ npm i -D ts-loader

也可以按住含awesome-typescript-loader库替代ts-loader库，据说awesome-typescript-loader比ts-loader编译.ts为文件的速度更快。

$ npm i -D awesome-typescript-loader

webpack配置ts-loader加载器

$ vim webpack.config.js

module.exports = {
    module:{
        rules:[
            {test:/\.ts$/, use:["ts-loader"]},
        ]
    },
}

file-loader

webpack默认只能打包处理JS文件或模块，第三方loader是帮助webpack打包其他类型文件，比如文件、图片、css等。配置第三方loader需在webpack中新增module节点，节点是规则的集合，集合名字为rules，添加的loader即在rules集合中新增规则，每个规则必须配置两项test和use，test搭配键值对，值是一个正则表达式用来匹配处理的文件类型。use用了来指定使用哪个loader模块来打包处理该类型的文件。

使用file-loader可帮助webpack打包处理图片文件比如.png、.jpg、.jpeg等格式，打包图片时file-loader会为每张图片生成一个随机的hash值作为图片的名称。具体来讲，webpack对项目代码打包构建时，当遇到图片文件时会去webpack配置文件中查找module节点，看是否具有对应配置节点去处理图片的打包，若发现图片文件是使用file-loader进行打包的，就会将图片交给file-loader进行处理。file-loader首先会将图片移动到output文件夹下，并随即生成一个hash值作为图片名称，并将打包后的图片名称返回给require函数。

安装file-loader插件

$ npm i -D file-loader

webpack配置file-loader打包图片文件

$ vim webpack.config.js

module.exports = {
    module:{
        rules:[
            {test:/\.(png|jpg|jpeg|gif|svg)$/, use:"file-loader"}
        ]
    },
}

html-webpack-plugin

安装webpack插件html-webpack-plugin用于自动生成index.html文件

$ npm i -D html-webpack-plugin

webpack配置文件中设置html-webpack-plugin插件

$ vim webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins:[
        new HtmlWebpackPlugin({
            title:"homepage",
            template:path.join(__dirname, "index.html")
        })
    ],
};

在根目录下创建html的模板文件

$ vim index.html

copy-webpack-plugin

使用CopyWebpackPlugin插件可以将静态资源拷贝到构建目录中，从而优化Webpack在构建上的速度，减少时间。

$ npm i -S copy-webpack-plugin

$ vim webpack.config.js

将src目录下的asets文件夹下的静态资源拷贝到dist文件夹下

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    plugins:[
        new CopyWebpackPlugin([
            {
                from:__dirname+"/src/assets",
                to:__dirname+"/dist",
                ignore:[".*"]
            }
        ])
    ],
}

插件选项	描述
from	定义要拷贝的源文件
to	定义要拷贝到目录的目标文件夹
toType	file或dir，默认为文件。
force	是否强制覆盖插件，默认为文件。
context	默认base
flatten	仅拷贝指定文件，可使用模糊匹配。
ignore	忽略拷贝指定的文件，可模糊匹配。

构建配置

配置webpack，项目根目录下创建webpack.config.js文件。

$ vim webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    devtool:"inline-source-map",
    entry:"./src/app.ts",
    output:{
        filename:"[name].bundle.js",
        path:path.resolve(__dirname, "dist")
    },
    resolve:{
        extensions:[".js", ".ts", ".tsx"]
    },
    module:{
        rules:[
            {test:/\.ts$/, use:["ts-loader"]},
            {test:/\.(png|jpg|jpeg|gif|svg)$/, use:"file-loader"}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"homepage",
            template:path.join(__dirname, "index.html")
        })
    ],
    devServer:{
        contentBase:path.join(__dirname, "dist"),
        compress:true,
        port:8100,
        historyApiFallback:true,
        hot:true,
        open:true
    },
    externals:{
        
    }
};

备注：
若需要在debug模式下生成相应的map文件则需要在tsconfig.json中设置sourceMap为true，并在webpack.config.js中设置devtool为inline-source-map。

入口文件

安装PIXI插件

$ npm i -S pixi.js

若使用Visual Studio Code作为IDE，可安装相应@types文件用于代码提示。

$ npm i -D @types/pixi.js @types/node

创建webpack构建的入库文件entry选项

$ vim src/app.ts

使用面向过程方式

import * as PIXI from "pixi.js";

const renderer = PIXI.autoDetectRenderer();
document.body.appendChild(renderer.view);

使用面向对象方式

import {Application} from "pixi.js";


class App{
    private app:Application;
    
    constructor(opts={}){
        this.app = new Application(opts);
        document.body.appendChild(this.app.view);
    }
}

new App({width:window.innerWidth, height:window.innerHeight});

命令脚本

$ vim package.json

{
  "name": "pixits",
  "version": "1.0.0",
  "description": "pixi ts",
  "main": "./index.html",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --content-base ./dist",
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "build:watch": "node_modules/.bin/webpack -w",
    "clean": "rm ./dist/*",
    "reset": "rm -rf node_modules && npm cache verify && npm i"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "file-loader": "^5.1.0",
    "pixi.js": "^5.2.1"
  },
  "devDependencies": {
    "@types/node": "^13.9.0",
    "@types/pixi.js": "^5.0.0",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

运行命令

命令	描述
npm run start	node_modules/.bin/webpack-dev-server
npm run dev	node_modules/.bin/webpack-dev-server --mode development --content-base ./
npm run build	node_modules/.bin/webpack --config webpack.config.js
npm run watch	node_modules/.bin/webpack -w
npm run clean	rm ./dist/*
npm run reset	rm -rf node_modules && npm cache verify && npm i

start命令会执行webpack-dev-server可用于代码热更新

$ npm run start

build命令会执行package.json中设置的build选项，调用webpack命令编译TypeScript文件并打包到dist/main.js文件中。

$ npm run build

使用webpack构建项目时开启监视

$ npm run build:watch

删除编译后生成dist文件夹下的所有文件

$ npm run clean

运行测试

$ npm run start

运行web服务器后会在根目录生成dist文件夹，并生成webpack设置的入口文件main.js文件，在默认index.html文件中会引入dist文件夹下的main.js文件。

Window系统下查看端口是否被占用

$ netstat -ano|grep 8100

$ netstat -ano|findstr "8100"
TCP    127.0.0.1:8100         0.0.0.0:0              LISTENING       15144

根据查询中的PID，在任务管理器的详细信息中，找到对应项目，右键删除。或者使用删除命令执行操作

$ taskkill /f /t /im Tencentdl.exe