# Webpack5-Typescript-Starter

**Repository Path**: xcchcaptain/webpack5-typescript-starter

## Basic Information

- **Project Name**: Webpack5-Typescript-Starter
- **Description**: Webpack5集成Typescript下，各种类型的开发起始模板。
包括支持Vue3，tailwindcss, jest
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-26
- **Last Updated**: 2022-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack5, TypeScript, Vue, Tailwind

## README

# Webpack5 + TypeScript4 项目起始环境
  作为webpack5和typescript结合的练手项目，内含一个简陋的贪吃蛇游戏。

## 特性

- [x] Webpack5
- [x] TypeScript 4
- [x] Babel
- [x] Less+Postcss
- [x] Jest
- [x] Eslint
- [x] 对vue3的支持请使用分支[feat_vue3](http://192.168.10.26/canyou/webpack5-typescript-starter/-/tree/feat_vue3)
- [x] 对tailwindcss的支持请使用分支[feat_taiwindcss](http://192.168.10.26/canyou/webpack5-typescript-starter/-/tree/feat_tailwindcss)
## 怎么运行？

#### 安装依赖:

``` shell
yarn install 
```

#### 启动服务器:
``` shell
yarn start
```
#### 贪吃蛇游戏规则：
 1. 使用“方向键”控制行进方向
 2. 十分即升一级， 升级时会加快行进速度，最多10级
 3. 一次只会出现一个食物，出现的位置随机。
 3. 蛇穿墙，咬到自己，即游戏停止
 4. 不能直接回头，例如，正在向左行进，按右键即为无效操作
 5. 未对蛇的身躯长度做限制

## 其他

#### 打包一个版本，对输出内容不压缩:

``` shell
yarn build
```

#### 打包一个版本，对输出内容压缩处理:

``` shell
yarn build.prod
```

#### 运行单元测试:
``` shell
yarn test
```

## 相关资源
[typescript 视频教程](https://www.bilibili.com/video/BV1Xy4y1v7S2?p=6)  
[typescript 官方指南](https://www.typescriptlang.org/docs/handbook/intro.html)  
[typescript 代码风格指南](https://zh-google-styleguide.readthedocs.io/en/latest/google-typescript-styleguide/consistency/)  
[Vue3 添加typescript](https://v3.vuejs.org/guide/typescript-support.html)
[tailwind+vue+webpack](https://bestofvue.com/repo/Aridez-vue-tailwind-webpack-boilerplate#configuring-tailwinds-purgecss)