typescript 贪吃蛇

webpack.config.js

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {

    entry: "./src/index.ts",

    output: {

        path: path.resolve(__dirname, "dist"),

        filename: "bundle.js",

        // 不使用箭头函数打包

        // environment: {

        //     arrowFunction: false

        // }

    },

    module: {

        rules: [{

                test: /\.ts$/,

                use: [{

                        // 指定加载器

                        loader: "babel-loader",

                        // 设置babel

                        options: {

                            // 设置预定义环境

                            presets: [

                                [

                                    // 指定环境插件

                                    "@babel/preset-env",

                                    {

                                        // 兼容目标浏览器

                                        targets: {

                                            "chrome": 88

                                        },

                                        "corejs": "3",

                                        "useBuiltIns": "usage"

                                    }

                                ]

                            ]

                        }

                    },

                    "ts-loader"

                ],

                exclude: /node_modules/

            },

            {

                test: /\.less$/,

                use: [

                    'style-loader',

                    'css-loader',

                    'less-loader'

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: "./src/index.html"

        }),

        new CleanWebpackPlugin()

    ],

    resolve: {

        extensions: [".ts", ".js"]

    }

}

package.json

{

  "name": "ts0930",

  "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"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "@babel/core": "^7.12.9",

    "@babel/preset-env": "^7.12.7",

    "babel-loader": "^8.2.2",

    "core-js": "^3.8.0",

    "css-loader": "^2.0.2",

    "html-webpack-plugin": "^4.5.0",

    "less": "^3.9.0",

    "less-loader": "^4.1.0",

    "style-loader": "^0.23.1",

    "ts-loader": "^8.0.11",

    "typescript": "^4.1.2",

    "webpack": "^4.44.2",

    "webpack-cli": "^4.2.0",

    "webpack-dev-server": "^3.11.0"

  },

  "devDependencies": {

    "clean-webpack-plugin": "^4.0.0"

  }

}

tsconfig.json

{

    "compilerOptions": {

        "target": "ES2015",

        "module": "ES2015",

        "strict": true,

        "noEmitOnError": true

    }

}