TS项目练习:贪吃蛇小游戏(一)

• 我们学习ts就是要学习如何将ts引入到我们现成的项目当中,引入ts的好处以及使用ts的编程思想(面向对象)去编写代码,因此我们不仅要学会使用ts还要学会面向对象的编程思想,这种编程思想就一句话概括,所有的东西都要写到一个类上面去,任何代码都要有类,都套通过这个类来实现。

1. 项目的搭建

• 我们使用回之前练习ts结合webpack的配置文件:webpack.config.js和tsconfig.js和package.json
• 安装样式的加载器和less预处理语言

npm i -D less less-loader css-loader style-loader
npm i -D postcss postcss-loader postcss-preset-env

• package.json

{
  "name": "snake",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.26.1",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "postcss": "^8.4.20",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^7.8.3",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

• tsconfig.json

{
    "compilerOptions": {
      "module": "ES2015",//模块使用版本
      "target": "ES2015",//生成的js版本
      "strict": true,//启动严格模式
      "noEmitOnError": true//存在错误则不执行打包
    }
  }

• webpack.config.js

// 1. 引入包
const path = require('path');// node内置模块,用于处理路径(拼接路径)
const HTMLWebpackPlugin = require('html-webpack-plugin');//帮助我们自动的生成html文件方便调试
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//

// 2. 正式开始配置webpack
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {

    // 1.指定入口文件
    entry:"./src/index.ts",

    // 2.指定打包后输出的文件路径
    output:{
        // 指定输出目录
        path: path.resolve(__dirname,'dist'),//输出为该目录下的dist目录
        // 打包后的文件名
        filename:'bundle.js',//打包成功后在dist目录下输出bundle.js

    /*----------------------- 兼容老版本的浏览器(不认识箭头函数的浏览器版本) -------------------------*/ 
        // 设置兼容老版本的浏览器(高数webpack不使用箭头函数)
        environment:{
            arrowFunction:false,//禁止使用箭头函数(ie10以下不兼容)
            const: false,//禁止使用const(ie10以下不兼容)
        }
    /* --------------------------------------------------------------------------------------------*/

    },

    // 3.指定webpack在打包时要使用的模块
    module:{
        // 指定要加载的规则(loader的规则)
        rules:[
            {
                // test指定规则生效的文件
                test:/\.ts$/,//正则匹配以ts结尾的文件

                /* ----------------------------- loader的多个使用写法 ---------------------------*/
                // 要使用到的loader
                use:[
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options:{
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        "targets":{
                                            "chrome": "57",// 兼容chrome浏览器到57版本,当时最高
                                            "ie": "11",// 兼容ie浏览器到11版本, 比较低,打包过后应该不会使用es6语法
                                        },
                                        // 指定corejs的版本
                                        "corejs":"3",// 使得老版本的浏览器能够兼容新语法,如promise,async await等..
                                        // 使用corejs的方式 "usage" 表示按需加载
                                        "useBuiltIns": "usage"//设置为按需加载
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        loader:'ts-loader',//这里需写在后面,因为加载器的执行顺序是从后往前执行的(谁最后谁先执行)
                    }
                ],
                /* ---------------------------------------------------------------------------------------*/

                // 要排除的文件(不使用改规则)
                exclude:/node_modules/,
            },

            // 设置less文件的处理
            {
                test: /\.less$/,//处理文件后缀
                use:[
                    "style-loader",
                    "css-loader",

                    // 引入postcss(处理浏览器兼容性问题)
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            //兼容两个最新浏览器的版本
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ],
    },

    // 4.配置webpack插件
    plugins:[
        //注册插件(里面可以传入一个配置对象)
        new CleanWebpackPlugin(),//清除插件，每次构建都会先清除输出目录
        new HTMLWebpackPlugin({//自动创建html文件插件
            // title:'自定义的网页标题(title)',//输出的网页标题
            template: "./src/index.html",//根据你定义的模板生成网页
        }), 
    ],

    // 5.设置模块的可引用文件
    resolve: {
        // 设置拓展名(后缀)为 .ts 以及 .js 可以作为模块引用
        extensions: ['.ts', '.js']
    },

    // 6.设置模式
    mode:'development'  //production(开发模式)
}