菜单 搜索
首页 前端知识 用TS从零开始制作贪吃蛇游戏--1

用TS从零开始制作贪吃蛇游戏--1

2024-08-30 20:08:28 前端知识 前端哥 4 974 我要收藏

本内容学习来自B站李立超老师 原文链接

本项目软件使用vscode,样式文件使用less,面对对象的TS,打包通过webpack进行制作

目录

初始化项目结构

1.新建项目文件夹 Gluttonous snake

2.通过vscode打开该文件夹

3.初始化package.json文件​编辑

4.进行webpack配置

1.配置html-webpack-plugin插件

2.配置webpack服务插件

2.配置TS编译插件

3.配置less编译

初始化项目结构

  1. 新建项目文件夹 Gluttonous snake

  2. 通过vscode打开该文件夹

  3.  初始化package.json文件

    点击终端-新建终端 打开命令行界面 

    在命令行界面里输入npm init -y,初始化package.json文

  进行webpack配置

         在命令行见面里输入 npm i webpack webpack-cli 回车进行安装包

        

安装成功后 如图

 接下来进行配置webpack

  1. 新建webpack配置文件webpack.config.js如图
  2. 配置webpack的代码

         首先在根目录下新建src文件夹用来存放项目代码文件，在src文件夹里新建index.ts用来当作  webpack的入口文件，以及index.html文件。

        在webpack.config.js中写入如下内容

// 首先导入path模块
const exp = require('constants');
const path = require('path');

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode:'development',

  // 入口文件
  entry:'./src/index.ts',

  // 打包配置
  output:{
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path:path.resolve(__dirname,'dist') , // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename:'bundle.js'
  }
}

现在基本的webpack配置已经好了，接下来在package.json添加webpack打包命令

​
{
  "name": "gluttonoussnake",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"，
    // 添加如下代码
    "dev":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0"
  }
}

​

3.启动webpack打包命令

 在命令行界面输入 npm run dev 进行webpack打包命令，打包完成后会出现dist文件夹，该文件夹里包含了打包的文件，但现在有个问题，dist文件夹里只有bundle.js但没有html文件。接下来我们解决这个问题。

4.配置html-webpack-plugin插件

       首先进行安装，在命令行界面输入 npm i html-webpack-plugin，安装完成后在webpack.config.js文件里进行配置。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode:'development',

  // 入口文件
  entry:'./src/index.ts',

  // 打包配置
  output:{
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path:path.resolve(__dirname,'dist') , // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename:'bundle.js'
  },
  // 配置webpack插件
  plugins:[
    new HTMLWebPackPlugin ({
      // 网页文件标题
      title:'GluttonousSnake',
      // 网页文件模板
      template:'./src/index.html'
    })
  ]
}

配置完成后再输入打包命令 npm run dev ，就可以看到dist文件夹里有了html文件，并且自动引入了bundle.js文件。

 接下来我们再安装一个插件CleanWebpackPlugin，该插件在我们每次打包时都会清空dist文件里的所有文件，以此来让我们每次打包文件都是相同的。

在命令行输入npm i clean-webpack-plugin,安装成功后进行配置

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode: 'development',

  // 入口文件
  entry: './src/index.ts',

  // 打包配置
  output: {
    clean: true,
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path: path.resolve(__dirname, 'dist'), // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename: 'bundle.js'
  },
  // 配置webpack插件
  plugins: [
    // WebpackHtml模板插件
    new HTMLWebPackPlugin({
      // 网页文件标题
      title: 'GluttonousSnake',
      // 网页文件模板
      template: './src/index.html'
    }),
    // 添加每次打包前清空dist文件夹插件
    new CleanWebpackPlugin()
  ]
}

接下来我们每次打包前都会先清空dist文件夹里的所有文件才会再生成打包文件

接下来我们再安装一个webpack服务插件,现在我们每次编写完代码都需要手动进行webpack打包,非常不方便,接下来我们解决这个问题

5.配置webpack服务插件

        首先安装webpack-dev-server插件，在命令行输入npm i webpack-dev-server,安装完成后进行配置。在package.json添加命令

{
  "name": "gluttonoussnake",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    // 添加如下命令
    "server": "webpack server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

随后在命令行输入npm run server 等待命令执行完成后，出现一个网址，按ctrl+鼠标左键即可跳转到该网址界面

 随后在index.ts随便写点东西,保存后都会自动打包编译。

但还有一个问题，我们不能书写TS代码，一旦书写就会打包错误

 这是因为我们没有配置TS的编译器，接下来我们进行配置

6.配置TS编译插件

        首先安装typescript,ts-loader这两个包，安装完成后再webpack.config.js文件中进行配置。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode: 'development',

  // 入口文件
  entry: './src/index.ts',

  // 打包配置
  output: {
    clean: true,
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path: path.resolve(__dirname, 'dist'), // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename: 'bundle.js'
  },
  // 配置webpack插件
  plugins: [
    new HTMLWebPackPlugin({
      // 网页文件标题
      title: 'GluttonousSnake',
      // 网页文件模板
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // 配置编译
  module:{
    // 编译规则
    rules: [
      {
        // 编译以ts结尾的文件
        test:/\.ts$/,
        // 使用该编译器编译TS文件
        use:'ts-loader',
        // 排除文件
        exclude: /node_modules/
      }
    ]
  }
}

配置好后在根目录下新建tsconfig.jsonTS配置文件，写入以下内容。

{
  "compilerOptions": {
    // 模块版本
    "module": "ES2015",
    // 目标版本
    "target": "ES2015",
    // 是否开启严格模式
    "strict": true,
  }
}

   以上都配置好后，运行npm run server命令。接下来在index.TS里就可以书写TS代码了也不会报错了。

但发现TS代码书写是没问题了，但是一但导入一个TS模块的话就会报错。

 解决这个问题只需要在webpack.config.js文件中加入以下代码。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode: 'development',

  // 入口文件
  entry: './src/index.ts',

  // 打包配置
  output: {
    clean: true,
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path: path.resolve(__dirname, 'dist'), // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename: 'bundle.js'
  },
  // 配置webpack插件
  plugins: [
    new HTMLWebPackPlugin({
      // 网页文件标题
      title: 'GluttonousSnake',
      // 网页文件模板
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // 配置编译
  module: {
    // 编译规则
    rules: [
      {
        // 编译以ts结尾的文件
        test: /\.ts$/,
        // 使用该编译器编译TS文件
        use: 'ts-loader',
        // 排除文件
        exclude: /node_modules/
      }
    ]
  },

  // 解析模块
  resolve: {
    // 解析js和ts文件的模块
    extensions: ['.js', '.ts']
  }
}

重新运行npm run server命令即可看到引入模块不会报错了。

最后我们配置一下less文件的编译。

7.配置less编译

        运行npm i less less-loader css-loader style-loader,安装完成在webpack.config.js配置如下

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
  // 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
  mode: 'development',

  // 入口文件
  entry: './src/index.ts',

  // 打包配置
  output: {
    clean: true,
    // 打包后的文件存放路径 __dirname 等于 当前项目的绝对路径
    path: path.resolve(__dirname, 'dist'), // F:\GluttonousSnake\dist
    // 打包后的js代码文件名
    filename: 'bundle.js'
  },
  // 配置webpack插件
  plugins: [
    new HTMLWebPackPlugin({
      // 网页文件标题
      title: 'GluttonousSnake',
      // 网页文件模板
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // 配置编译
  module: {
    // 编译规则
    rules: [
      {
        // 编译以ts结尾的文件
        test: /\.ts$/,
        // 使用该编译器编译TS文件
        use: 'ts-loader',
        // 排除文件
        exclude: /node_modules/
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },

  // 解析模块
  resolve: {
    // 解析js和ts文件的模块
    extensions: ['.js', '.ts']
  }
}

接下来在index.ts中引入 

import './index.less'

配置好后再运行命令就可以看到less样式已经成功导入到网页中

 到这里一个基本的TS项目已经配置好了，一些别的功能等要用的时候在进行配置。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17300.html
标签
less
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML生成三张图片并列循环轮播

2024-09-11 10:09:13

SQLServer2022新特性JSON_OBJECT从零个或多个表达式中构造JSON对象

2024-09-10 23:09:39

推荐一款强大的C 库：JWT-CPP——JSON Web Token的轻量级实现

2024-09-10 23:09:39

Java中的@JSONField注解详解：用法、场景与实践

2024-09-10 23:09:37

SQLServer2022新特性JSON_ARRAY从零个或更多表达式中构造 JSON 数组文本

2024-09-10 23:09:37

form.is_valid()一直为False，且form.errors.as_json()为空

2024-09-10 23:09:37

JWT（JSON WEB TOKEN）详解

2024-09-10 23:09:36

sublime Text3使用json格式化插件

2024-09-10 23:09:28

NPM 常用命令（十二）

2024-09-10 23:09:24

npm install出现（npm error code EPERM npm error syscall mkdirnpm error path）的错误

2024-09-10 23:09:24

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
3

vue使用datav echarts

2024-09-06 00:09:381000
4

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
5

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
6

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
7

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
8

npm的使用

2024-08-18 00:08:131000
9

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
10

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！