創(chuàng)建項目百匆，使用npm init初始化項目于微，也可使用npm init -y使用默認(rèn)配置初始化項目暂衡。
$ 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
通常使用中不會直接在命令行中使用胚吁，而會在項目根目錄下創(chuàng)建tsconfig.json文件來配置tsc編譯器的相關(guān)選項牙躺。
初始化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目標(biāo)版本
- module 指定生成哪個模塊系統(tǒng)代碼
- allowJs 是否允許使用JS編碼
Webpack
安裝項目構(gòu)建工具
webpack是一個模塊打包工具半抱，可見需要松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源脓恕，將按需加載的模塊進(jìn)行代碼分割，等實際需要使用時再異步加載窿侈。
webpack的工作方式是將項目作為一個整體炼幔，通過一個給定的主文件，從主文件開始尋找項目所有的依賴文件史简，通過對應(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é)點桨醋，節(jié)點是規(guī)則的集合，集合名字為rules现斋，添加的loader即在rules集合中新增規(guī)則喜最，每個規(guī)則必須配置兩項test和use，test搭配鍵值對庄蹋，值是一個正則表達(dá)式用來匹配處理的文件類型瞬内。use用了來指定使用哪個loader模塊來打包處理該類型的文件。
使用file-loader可幫助webpack打包處理圖片文件比如.png限书、.jpg遂鹊、.jpeg等格式，打包圖片時file-loader會為每張圖片生成一個隨機(jī)的hash值作為圖片的名稱蔗包。具體來講秉扑，webpack對項目代碼打包構(gòu)建時，當(dāng)遇到圖片文件時會去webpack配置文件中查找module節(jié)點调限，看是否具有對應(yīng)配置節(jié)點去處理圖片的打包舟陆，若發(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:[".*"]
}
])
],
}
| 插件選項 | 描述 |
|---|---|
| from | 定義要拷貝的源文件 |
| to | 定義要拷貝到目錄的目標(biāo)文件夾 |
| toType | file或dir茎活，默認(rèn)為文件。 |
| force | 是否強(qiáng)制覆蓋插件琢唾，默認(rèn)為文件载荔。 |
| context | 默認(rèn)base |
| flatten | 僅拷貝指定文件，可使用模糊匹配采桃。 |
| ignore | 忽略拷貝指定的文件懒熙，可模糊匹配。 |
構(gòu)建配置
配置webpack普办，項目根目錄下創(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選項
$ 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"
}
}
運行命令
| 命令 | 描述 |
|---|---|
| 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選項，調(diào)用webpack命令編譯TypeScript文件并打包到dist/main.js文件中蔬浙。
$ npm run build
使用webpack構(gòu)建項目時開啟監(jiān)視
$ npm run build:watch
刪除編譯后生成dist文件夾下的所有文件
$ npm run clean
運行測試
$ npm run start
運行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)項目俱病，右鍵刪除「そ幔或者使用刪除命令執(zhí)行操作
$ taskkill /f /t /im Tencentdl.exe
