关于webpack和typescript的环境配置

前言

大三不考研,天天像过年啊!
我真是作大死自己给自己找事做。本来想着没事干找游戏玩,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文件下自然打包而成。

结尾

以上配置还是要根据自己项目的目录结构自行调整,盲目复制代码不可取。
今天好像什么事都做不成。好在有小可爱陪着。
生活真的很残酷,生活真的很美好!
感谢所有人,感谢小姐姐。明天六级自然是高分飘过!
最后,博客重新上线啦:
嘿! 你看我多喜欢你啊!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容