Pixi.js TypeScript Webpack

創(chuàng)建項(xiàng)目，使用npm init初始化項(xiàng)目，也可使用npm init -y使用默認(rèn)配置初始化項(xiàng)目。

$ mkdir pixits
$ npm init

創(chuàng)建文件結(jié)構(gòu)

$ 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

通常使用中不會直接在命令行中使用，而會在項(xiàng)目根目錄下創(chuàng)建tsconfig.json文件來配置tsc編譯器的相關(guān)選項(xiàng)。

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

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

TypeScript配置文件tsconfig.json中常用配置分為compilerOptions、include、exclude三項(xiàng)

  • compilerOptions 表示TypeScript編譯器選項(xiàng)
  • 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編譯器選項(xiàng)

  • target 指定ECMAScript目標(biāo)版本
  • module 指定生成哪個模塊系統(tǒng)代碼
  • allowJs 是否允許使用JS編碼

Webpack

安裝項(xiàng)目構(gòu)建工具

webpack是一個模塊打包工具，可見需要松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源，將按需加載的模塊進(jìn)行代碼分割，等實(shí)際需要使用時再異步加載。

webpack的工作方式是將項(xiàng)目作為一個整體，通過一個給定的主文件，從主文件開始尋找項(xiàng)目所有的依賴文件，通過對應(yīng)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服務(wù)器喲關(guān)于調(diào)試，也可選擇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庫，據(jù)說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默認(rèn)只能打包處理JS文件或模塊，第三方loader是幫助webpack打包其他類型文件，比如文件、圖片、css等。配置第三方loader需在webpack中新增module節(jié)點(diǎn)，節(jié)點(diǎn)是規(guī)則的集合，集合名字為rules，添加的loader即在rules集合中新增規(guī)則，每個規(guī)則必須配置兩項(xiàng)test和use，test搭配鍵值對，值是一個正則表達(dá)式用來匹配處理的文件類型。use用了來指定使用哪個loader模塊來打包處理該類型的文件。

使用file-loader可幫助webpack打包處理圖片文件比如.png、.jpg、.jpeg等格式，打包圖片時file-loader會為每張圖片生成一個隨機(jī)的hash值作為圖片的名稱。具體來講，webpack對項(xiàng)目代碼打包構(gòu)建時，當(dāng)遇到圖片文件時會去webpack配置文件中查找module節(jié)點(diǎn)，看是否具有對應(yīng)配置節(jié)點(diǎn)去處理圖片的打包，若發(fā)現(xiàn)圖片文件是使用file-loader進(jìn)行打包的，就會將圖片交給file-loader進(jìn)行處理。file-loader首先會將圖片移動到output文件夾下，并隨即生成一個hash值作為圖片名稱，并將打包后的圖片名稱返回給require函數(shù)。

安裝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配置文件中設(shè)置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")
        })
    ],
};

在根目錄下創(chuàng)建html的模板文件

$ vim index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Document</title>
</head>
<body>
</body>
</html>

copy-webpack-plugin

使用CopyWebpackPlugin插件可以將靜態(tài)資源拷貝到構(gòu)建目錄中，從而優(yōu)化Webpack在構(gòu)建上的速度，減少時間。

$ npm i -S copy-webpack-plugin

$ vim webpack.config.js

將src目錄下的asets文件夾下的靜態(tài)資源拷貝到dist文件夾下

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    plugins:[
        new CopyWebpackPlugin([
            {
                from:__dirname+"/src/assets",
                to:__dirname+"/dist",
                ignore:[".*"]
            }
        ])
    ],
}
插件選項(xiàng) 描述
from 定義要拷貝的源文件
to 定義要拷貝到目錄的目標(biāo)文件夾
toType file或dir，默認(rèn)為文件。
force 是否強(qiáng)制覆蓋插件，默認(rèn)為文件。
context 默認(rèn)base
flatten 僅拷貝指定文件，可使用模糊匹配。
ignore 忽略拷貝指定的文件，可模糊匹配。

構(gòu)建配置

配置webpack，項(xiàng)目根目錄下創(chuàng)建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模式下生成相應(yīng)的map文件則需要在tsconfig.json中設(shè)置sourceMap為true，并在webpack.config.js中設(shè)置devtool為inline-source-map。

入口文件

安裝PIXI插件

$ npm i -S pixi.js

若使用Visual Studio Code作為IDE，可安裝相應(yīng)@types文件用于代碼提示。

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

創(chuàng)建webpack構(gòu)建的入庫文件entry選項(xiàng)

$ vim src/app.ts

使用面向過程方式

import * as PIXI from "pixi.js";

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

使用面向?qū)ο蠓绞?/p> 

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"
  }
}

運(yùn)行命令

命令 描述
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命令會執(zhí)行webpack-dev-server可用于代碼熱更新

$ npm run start

build命令會執(zhí)行package.json中設(shè)置的build選項(xiàng)，調(diào)用webpack命令編譯TypeScript文件并打包到dist/main.js文件中。

$ npm run build

使用webpack構(gòu)建項(xiàng)目時開啟監(jiān)視

$ npm run build:watch

刪除編譯后生成dist文件夾下的所有文件

$ npm run clean

運(yùn)行測試

$ npm run start

運(yùn)行web服務(wù)器后會在根目錄生成dist文件夾，并生成webpack設(shè)置的入口文件main.js文件，在默認(rèn)index.html文件中會引入dist文件夾下的main.js文件。

Window系統(tǒng)下查看端口是否被占用

$ netstat -ano|grep 8100

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

根據(jù)查詢中的PID，在任務(wù)管理器的詳細(xì)信息中，找到對應(yīng)項(xiàng)目，右鍵刪除?；蛘呤褂脛h除命令執(zhí)行操作

$ taskkill /f /t /im Tencentdl.exe
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容