T O P

[资源分享]     自学 TypeScript 第四天,手把手项目搭建

  • By - 楼主

  • 2022-11-21 12:02:03
  • 前言:

    学了三天,我们学习了 TS 的基本类型声明,TS 的编译,webpack 打包,其实也就差不多了,剩下的也就一些 类,继承,构造函数,抽象类,泛型一些的,如果都细致的讲可能写好久,感兴趣的可以自己找资料细致的去学一下

    学习代码或一个新语法,最好的方法无非就是做项目,从这个过程中学会如何去使用,怎么去写

    废话不多说,我们开始今天的贪吃蛇项目初始化

    项目搭建,初始化:

    我记得前一天,我们配置过一份 webpack 配置,直接复制过来使用,这里就不多说了,然后就是在项目中引入我们的 less

    npm i -D less less-loader css-loader style-loader

    什么什么杠 loader ,就是把什么和 webpack 进行一个整合

    安装好我们去配置一下,之前我们的文件只对 ts 进行了一个处理,现在我们要对 less 进行一个处理,所以要在 rules 里新加一个规则对象

    {
        test:/\.less$/,
    } 

    首先我们先用 test 指定我们的规则生效文件

                {
                    test:/\.less$/,
                    use:[
                        "style-loader",
                        "css-loader",
                        "less-loader"
                    ]
                }

    其次我们在 use 进行配置 loader 这里记住 use 的执行顺序是从下到上执行的,这里我想让它先执行 less-loader 最后执行 style-loader

    配置好之后我们在less 文件中给 body 一个背景色,然后在 TS 里面 impor 一下 引入 less 文件,最后在模板 index 文件中 引用我们的 js 文件

    打开 index 如果能看到你的背景色,恭喜你引用成功了

    css的兼容性:

    之前我们学习过 ts 的 babel 可以把代码转成其他版本的,来解决兼容性问题,而我们的 css 也就这种 ”babel“  叫 postcss

    npm i -D -S postcss postcss-loader postcss-preset-env

    下载成功之后,我们进行配置,而这个配置 loader 写到 less-loader 和 cssloader 之间,因为我们要在less 讲我们的代码 转换成 css 之后要立刻的处理兼容性问题

    因为我们还要配置 postcss ,所以是一个对象

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

    loader  : 指定加载器,postcss-loader

    options : 详细配置里面就一个 postcssOptions 

    plugins : 指定 postcssOptions 要使用的一个插件  postcss-preset-env

    browsers : 设置浏览器信息,last :最新的 3 三个  versions 版本 意思就是 兼容3个版本最新的浏览器

    项目初始化目录:

     

     

    webpack.config.js 配置详情 在文章最下边

    贪吃蛇,项目页面:

    配置完成之后,接下来为们来做我们的项目页面

    首先我们先打开我们的 开发服务器, npm start

    启动成功之后,我们就获得了一个可实时更新的 html 页面

    1,游戏主容器

    第一步我们先构建我们的游戏窗口,也就是我们贪吃蛇的可视区范围

    index.html 文件

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

    index.less 文件

    @bg-color: #b7d4a8;
    
    // 清楚默认
    *{
        margin: 0;
        padding:0;
        // 改变盒子模型的计算方式
        box-sizing: border-box;
    }
    #main{
        width: 360px;
        height: 420px;
        background-color: @bg-color;
        margin: 100px auto;
        border: 10px solid black;
        border-radius: 10px;
    }

    2,贪吃蛇移动区域和菜单区域

    设置完成我们的主容器,开始写我们的贪吃蛇移动区域和菜单区域

    index.html 文件

        <!-- 创建我们的游戏的主容器 -->
        <div id="main">
            <!-- 设置我们的游戏舞台 -->
            <div id="stage">
                
            </div>
            <!-- 设置我们游戏的记分牌 -->
            <div id="score_panel">
                <div id="score">
                    SCORE:<span>0</span>
                </div>
                <div id="lecel">
                    LECEL:<span>1</span>
                </div>
            </div>
        </div>

    index.less 文件

    // 设置
    @bg-color: #b7d4a8;
    
    // 清楚默认
    body{
        font: bold 20px "Courier"
    }
    *{
        margin: 0;
        padding:0;
        // 改变盒子模型的计算方式
        box-sizing: border-box;
    }
    // 设置我们的主窗口
    #main{
        width: 360px;
        height: 420px;
        background-color: @bg-color;
        margin: 100px auto;
        border: 10px solid black;
        border-radius: 10px;
        // 设置弹性盒
        display: flex;
        flex-flow:column;
        align-items: center;
        justify-content: space-around;
        #stage{
            width: 304px;
            height: 304px;
            border:2px solid black;
        }
        #score_panel{
            width: 300px;
            display: flex;
            justify-content:space-between; 
        }
    }

    3,蛇和食物

    再游戏舞台里面写,两个 div 一个是蛇,一个是食物,同一个css 只不过食物多了 top 和 left

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

    到现在位置,游戏的页面就完成了,下面是全部代码

     

     

     HTML代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>贪吃蛇项目</title>
    </head>
    <body>
        <!-- 创建我们的游戏的主容器 -->
        <div id="main">
            <!-- 设置我们的游戏舞台 -->
            <div id="stage">
                <!-- 设置我们的蛇 -->
                <div id="#snake" class="snake">
                    <!-- 蛇的各部分 -- 长度 -->
                    <div></div>
                </div>
                <!-- 食物 -->
                <div id="food">
    
                </div>
            </div>
            <!-- 设置我们游戏的记分牌 -->
            <div id="score_panel">
                <div id="score">
                    SCORE:<span>0</span>
                </div>
                <div id="lecel">
                    LECEL:<span>1</span>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
    </html>

    Less代码:

    // 设置
    @bg-color: #b7d4a8;
    
    // 清楚默认
    body{
        font: bold 20px "Courier"
    }
    *{
        margin: 0;
        padding:0;
        // 改变盒子模型的计算方式
        box-sizing: border-box;
    }
    // 设置我们的主窗口
    #main{
        width: 360px;
        height: 420px;
        background-color: @bg-color;
        margin: 100px auto;
        border: 10px solid black;
        border-radius: 10px;
        // 设置弹性盒
        display: flex;
        flex-flow:column;
        align-items: center;
        justify-content: space-around;
        #stage{
            width: 304px;
            height: 304px;
            border:2px solid black;
            position: relative;
            .snake>div{
                width: 10px;
                height: 10px;
                background-color: black;
                border: 1px solid @bg-color;
                position: absolute;
            };   
            #food{
                width: 10px;
                height: 10px;
                background-color: black;
                border: 1px solid @bg-color;
                position: absolute;
                top: 40px;
                left: 40px;
            }        
        }
        #score_panel{
            width: 300px;
            display: flex;
            justify-content:space-between; 
        }
    }

    tsconfig.json 配置

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

    webpack.config.js 配置

    // 引入一个包
    const path = require('path'); // 用户拼接路径
    // 引入 html 插件
    const HTMLWebpackPlugin = require('html-webpack-plugin');
    // 引入 clean 插件
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    // webpack 中所有的配置信息都应该写到我们的 module.exports 里
    module.exports = {
        "mode": 'development',
        // 指定入口文件
        entry:"./src/index.ts",
        // 指定打包文件所在的目录
        output:{
            path:path.resolve(__dirname,'dist'),
            // 打包后文件的文件
            filename:"index.js"
        },
        // 指定webpack 打包时要使用的模块
        module:{
            // 指定加载的规则
            rules:[
                {
                    // test 指定的是规则生效的文件
                    test:/\.ts$/, // 所有以 ts 结尾的文件
                    // use:'ts-loader',
                    use:[
                        // 配置我们的 babel
                        {
                            //  指定我们的加载器
                            loader:"babel-loader",
                            // 配置我们的babel
                            options:{
                                // 设置预定的环境
                                presets:[
                                    [
                                        // 指定我们的环境插件
                                        "@babel/preset-env",
                                        // 配置信息
                                        {
                                            // 要兼容的目标浏览器
                                            targets:{
                                                "chrome":"88",
                                                "ie":"11" // 指定浏览器的一个版本
                                            },
                                            // 指定 corejs 版本
                                            "corejs":"3", // 用那个版本的 js
                                            // 使用 corejs 的方式
                                            "useBuiltIns":"usage", // usage 按需加载
                                        }
                                    ]
                                ]
                            },
                        },
                        'ts-loader',
                    ],
                },
                // 设置我们 less 文件的处理
                {
                    test:/\.less$/,
                    use:[
                        "style-loader",
                        "css-loader",
                        // postcss
                        {
                            loader:'postcss-loader',
                            options:{  // 详细配置
                                postcssOptions:{ // 指定 postcssOptions 要使用的一个插件  postcss-preset-env
                                    plugins:[
                                        [
                                            "postcss-preset-env", 
                                            {
                                                browsers:'last 3 versions' // 浏览器信息,兼容三个全新版本的浏览器
                                            }                                        
                                        ]
                                    ]
                                }
                            },
                        },
                        "less-loader",
                    ]
                }
            ]
        },
        // 配置 webpack 插件
        plugins:[
            new CleanWebpackPlugin(),
            new HTMLWebpackPlugin({
                template:'./src/index.html',
            })
        ],
        // 用来设置引用模块
        resolve:{
            extensions:['.ts','.js'] // 以 .ts 和 .js 结尾的都可以当模块去引用
        }
    }

     

     

    Image

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册