TypeScript + Webpack 项目初始化与贪吃蛇页面搭建

项目环境与依赖准备

在开始 TypeScript 项目开发前，需要建立基础的打包与转译环境。核心步骤包括引入处理 TypeScript 文件的 Loader、用于代码转换的 Babel、以及处理 CSS 预处理（Less）和浏览器兼容性的工具链。

第1步：安装基础依赖

目的：安装 Less 预处理器及其对应的 Webpack Loader，以便在项目中编写 Less 样式。

• 操作命令： npm i -D less less-loader css-loader style-loader
• 说明： less-loader 将 Less 转换为 CSS，css-loader 解析 CSS 中的 @import 或 url()，style-loader 将 CSS 注入到 DOM 中。

第2步：配置 Less Loader

目的：在 Webpack 中定义规则，识别 .less 文件并按顺序处理。

Webapck 的 use 数组执行顺序是从右向左（即后写的先执行）。因此，配置如下：

{
    test: /\.less$/,
    use: [
        "style-loader",   // 最后执行：将 CSS 插入页面
        "css-loader",     // 其次：解析 CSS 依赖
        "less-loader"     // 最先执行：将 Less 转为 CSS
    ]
}

第3步：配置 PostCSS 兼容性处理

目的：自动补全 CSS 属性前缀，解决不同浏览器的兼容性问题。PostCSS 在此处作为 Less 向 CSS 转换后的后续处理步骤。

首先安装相关插件：npm i -D -S postcss postcss-loader postcss-preset-env

在 less-loader 之前添加 postcss-loader 配置对象：

{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                ['postcss-preset-env', { browsers: 'last 3 versions' }]
            ]
        }
    },
}

参数说明：browsers: 'last 3 versions' 表示兼容最近 3 个大版本的浏览器。

贪吃蛇游戏页面结构搭建

环境配置完成后，以下拉项目“贪吃蛇”为例，演示页面元素的构建与样式适配。

第4步：构建主容器

目的：创建游戏的可视区域，固定宽高并居中显示。

HTML 结构：

<div id="main"></div>

Less 样式：

#main {
    width: 360px;
    height: 420px;
    background-color: #b7d4a8;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
}

第5步：内部布局与计分板

目的：利用 Flexbox 布局，区分游戏舞台（Stage）和计分面板（Score Panel）。

HTML 结构：

<div id="main">
    <!-- 游戏舞台 -->
    <div id="stage"></div>
    <!-- 记分牌 -->
    <div id="score_panel">
        <div id="score">SCORE:<span>0</span></div>
        <div id="lecel">LEVEL:<span>1</span></div>
    </div>
</div>

Less 样式增强：

#main {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    
    #stage {
        width: 304px;
        height: 304px;
        border: 2px solid black;
        position: relative; // 为内部绝对定位元素提供参考
    }
    
    #score_panel {
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
}

第6步：绘制蛇与食物

目的：在游戏舞台上定义蛇身和食物的视觉表现。

Less 样式：

.snake > div {
    width: 10px;
    height: 10px;
    background-color: black;
    border: 1px solid @bg-color;
    position: absolute; // 便于后续通过 JS 动态改变坐标
}

#food {
    width: 10px;
    height: 10px;
    background-color: black;
    border: 1px solid @bg-color;
    position: absolute;
    top: 40px;
    left: 40px;
}

核心配置文件汇总

以下为完整的 tsconfig.json 与 webpack.config.js 配置参考，确保 TypeScript 编译、Babel 转码及样式处理协同工作。

TypeScript 配置 (tsconfig.json)

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true,
        "noEmitOnError": true
    }
}

Webpack 配置 (webpack.config.js)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [
            // 1. 处理 TS 文件：TS Loader -> Babel Loader
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', {
                                    targets: {
                                        chrome: '88',
                                        ie: '11'
                                    },
                                    corejs: '3',
                                    useBuiltIns: 'usage'
                                }]
                            ]
                        }
                    },
                    'ts-loader'
                ]
            },
            // 2. 处理 Less/SCSS 文件：Style -> CSS -> PostCSS -> Less
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ['postcss-preset-env', { browsers: 'last 3 versions' }]
                                ]
                            }
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    resolve: {
        extensions: ['.ts', '.js']
    }
};

以上就是 TypeScript 项目初始化与基础页面搭建的详细内容，更多关于 TypeScript 开发配置的资料请关注本站其它相关文章！