前言
大三不考研，天天像过年啊！
我真是作大死自己给自己找事做。本来想着没事干找游戏玩，Play市场里面找着找着就找到一个叫PaintHit的游戏。看着挺简单，而且之前几轮面试下来对自己不怎么熟悉canvas一致耿耿于怀，准备用canvas做一下。
刚学完TypeScript，准备用一下；webpack一直不怎么会用，用一下，从零开始配置项目，试试看。
差不多就这些。
正文
今天做的事是webpack与ts的配置，目录结构大体确定，日后工作再行修改。
目录结构：
├─css
├─dist // 打包后文件地址
├─scenes // html文件，场景
├─ts // ts文件存放地址
├─tsconfig.json
└webpack.config.js
首先当然是依赖啦：
"devDependencies": {
"ts-loader": "^4.4.1",
"typescript": "^2.9.2",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.7"
}
再安装好依赖后，我们在ts文件夹下写下代码：
// Canvas.ts
export default class Canvas {
constructor(private canvasId: string) {
this.initCanvas()
}
private canvas: HTMLCanvasElement
private ctx: CanvasRenderingContext2D
private initCanvas(): void {
this.canvas = document.querySelector(this.canvasId);
this.ctx = this.canvas.getContext('2d');
}
public log(): void {
console.log(this.canvas, this.ctx)
}
}
// startPage.ts
import Canvas from './Canvas'
function main(canvasId: string): void {
let canvas = new Canvas(canvasId)
canvas.log()
}
main('#start-canvas')
以上两个文件，其中 startPage.ts 引入了 Canvas.ts 中的类简单地完成日常开发需求。
接着我们在scenes文件夹下新建一个startPage.html当作我们地初始化场景：
// startPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Start Page</title>
<link rel="stylesheet" href="../css/startPage.css">
</head>
<body>
<canvas id="start-canvas"></canvas>
<script src="../dist/startPage.bundle.js"></script>
</body>
</html>
我们希望场景文件地html中引用打包好地js文件，而这些文件我们希望其整理在'./dist/js'下，以上是需求，接下来是配置ts和webpack。
TypeScript编译配置
简单来说就是本来需要命令行敲 tsc filename来编译，而又了tsconfig.json就可以简单地tsc，就能根据配置文件自动编译了。具体配置参考官网：
webpack官网
直接上代码：
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
webpack打包配置
这里并没有遇到太多地坑没什么好记录的。读者需要了解过webpack的基础，比如入口、出口、loader、plugin等等。解释ts需要用到ts-loader，文章一开始便安装了，所以比较简单直接上代码：
// webpack.config.js
const path = require('path')
module.exports = {
entry: {
startPage: './ts/startPage.ts',
Canvas: './ts/Canvas.ts'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
};
大功告成
./node_modules/.bin/webpack命令，实行打包操作，dist文件下自然打包而成。
结尾
以上配置还是要根据自己项目的目录结构自行调整，盲目复制代码不可取。
今天好像什么事都做不成。好在有小可爱陪着。
生活真的很残酷，生活真的很美好！
感谢所有人，感谢小姐姐。明天六级自然是高分飘过！
最后，博客重新上线啦：
嘿! 你看我多喜欢你啊！
