親自教你TypeScript 項(xiàng)目搭建過程

更新時(shí)間：2022年11月21日 14:28:03 作者：六扇有伊人

這篇文章主要介紹了親自教你TypeScript 項(xiàng)目搭建過程,我記得前一天，我們配置過一份 webpack 配置，直接復(fù)制過來使用，這里就不多說了，然后就是在項(xiàng)目中引入我們的 less，需要的朋友可以參考下

前言：

學(xué)了三天，我們學(xué)習(xí)了 TS 的基本類型聲明，TS 的編譯，webpack 打包，其實(shí)也就差不多了，剩下的也就一些類，繼承，構(gòu)造函數(shù)，抽象類，泛型一些的，如果都細(xì)致的講可能寫好久，感興趣的可以自己找資料細(xì)致的去學(xué)一下

學(xué)習(xí)代碼或一個(gè)新語法，最好的方法無非就是做項(xiàng)目，從這個(gè)過程中學(xué)會(huì)如何去使用，怎么去寫

廢話不多說，我們開始今天的貪吃蛇項(xiàng)目初始化

項(xiàng)目搭建，初始化：

我記得前一天，我們配置過一份 webpack 配置，直接復(fù)制過來使用，這里就不多說了，然后就是在項(xiàng)目中引入我們的 less

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

什么什么杠 loader ，就是把什么和 webpack 進(jìn)行一個(gè)整合

安裝好我們?nèi)ヅ渲靡幌?，之前我們的文件只?duì) ts 進(jìn)行了一個(gè)處理，現(xiàn)在我們要對(duì) less 進(jìn)行一個(gè)處理，所以要在 rules 里新加一個(gè)規(guī)則對(duì)象

{
    test:/\.less$/,
}

首先我們先用 test 指定我們的規(guī)則生效文件

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

其次我們?cè)?use 進(jìn)行配置 loader 這里記住 use 的執(zhí)行順序是從下到上執(zhí)行的，這里我想讓它先執(zhí)行 less-loader 最后執(zhí)行 style-loader

配置好之后我們?cè)趌ess 文件中給 body 一個(gè)背景色，然后在 TS 里面 impor 一下引入 less 文件，最后在模板 index 文件中引用我們的 js 文件

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

css的兼容性：

之前我們學(xué)習(xí)過 ts 的 babel 可以把代碼轉(zhuǎn)成其他版本的，來解決兼容性問題，而我們的 css 也就這種 ”babel“ 叫 postcss

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

下載成功之后，我們進(jìn)行配置，而這個(gè)配置 loader 寫到 less-loader 和 cssloader 之間，因?yàn)槲覀円趌ess 講我們的代碼轉(zhuǎn)換成 css 之后要立刻的處理兼容性問題

因?yàn)槲覀冞€要配置 postcss ，所以是一個(gè)對(duì)象

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

loader ：指定加載器，postcss-loader

options ：詳細(xì)配置里面就一個(gè) postcssOptions

plugins ：指定postcssOptions 要使用的一個(gè)插件 postcss-preset-env

browsers ：設(shè)置瀏覽器信息，last ：最新的 3 三個(gè) versions 版本意思就是兼容3個(gè)版本最新的瀏覽器

項(xiàng)目初始化目錄：

webpack.config.js 配置詳情在文章最下邊

貪吃蛇，項(xiàng)目頁面：

配置完成之后，接下來為們來做我們的項(xiàng)目頁面

首先我們先打開我們的開發(fā)服務(wù)器， npmstart

啟動(dòng)成功之后，我們就獲得了一個(gè)可實(shí)時(shí)更新的 html 頁面

1，游戲主容器

第一步我們先構(gòu)建我們的游戲窗口，也就是我們貪吃蛇的可視區(qū)范圍

index.html 文件

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

index.less 文件

@bg-color: #b7d4a8;

// 清楚默認(rèn)
*{
    margin: 0;
    padding:0;
    // 改變盒子模型的計(jì)算方式
    box-sizing: border-box;
}
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
}

2，貪吃蛇移動(dòng)區(qū)域和菜單區(qū)域

設(shè)置完成我們的主容器，開始寫我們的貪吃蛇移動(dòng)區(qū)域和菜單區(qū)域

index.html 文件

 <!-- 創(chuàng)建我們的游戲的主容器 -->
    <div id="main">
        <!-- 設(shè)置我們的游戲舞臺(tái) -->
        <div id="stage">
            
        </div>
        <!-- 設(shè)置我們游戲的記分牌 -->
        <div id="score_panel">
            <div id="score">
                SCORE:<span>0</span>
            </div>
            <div id="lecel">
                LECEL:<span>1</span>
            </div>
        </div>
    </div>

index.less 文件

// 設(shè)置
@bg-color: #b7d4a8;

// 清楚默認(rèn)
body{
    font: bold 20px "Courier"
}
*{
    margin: 0;
    padding:0;
    // 改變盒子模型的計(jì)算方式
    box-sizing: border-box;
}
// 設(shè)置我們的主窗口
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
    // 設(shè)置彈性盒
    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，蛇和食物

再游戲舞臺(tái)里面寫，兩個(gè) div 一個(gè)是蛇，一個(gè)是食物，同一個(gè)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;
        }

到現(xiàn)在位置，游戲的頁面就完成了，下面是全部代碼

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>貪吃蛇項(xiàng)目</title>
</head>
<body>
    <!-- 創(chuàng)建我們的游戲的主容器 -->
    <div id="main">
        <!-- 設(shè)置我們的游戲舞臺(tái) -->
        <div id="stage">
            <!-- 設(shè)置我們的蛇 -->
            <div id="#snake" class="snake">
                <!-- 蛇的各部分 -- 長(zhǎng)度 -->
                <div></div>
            </div>
            <!-- 食物 -->
            <div id="food">

            </div>
        </div>
        <!-- 設(shè)置我們游戲的記分牌 -->
        <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代碼：

// 設(shè)置
@bg-color: #b7d4a8;

// 清楚默認(rèn)
body{
    font: bold 20px "Courier"
}
*{
    margin: 0;
    padding:0;
    // 改變盒子模型的計(jì)算方式
    box-sizing: border-box;
}
// 設(shè)置我們的主窗口
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
    // 設(shè)置彈性盒
    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 配置

// 引入一個(gè)包
const path = require('path'); // 用戶拼接路徑
// 引入 html 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入 clean 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack 中所有的配置信息都應(yīng)該寫到我們的 module.exports 里
module.exports = {
    "mode": 'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在的目錄
    output:{
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename:"index.js"
    },
    // 指定webpack 打包時(shí)要使用的模塊
    module:{
        // 指定加載的規(guī)則
        rules:[
            {
                // test 指定的是規(guī)則生效的文件
                test:/\.ts$/, // 所有以 ts 結(jié)尾的文件
                // use:'ts-loader',
                use:[
                    // 配置我們的 babel
                    {
                        //  指定我們的加載器
                        loader:"babel-loader",
                        // 配置我們的babel
                        options:{
                            // 設(shè)置預(yù)定的環(huán)境
                            presets:[
                                [
                                    // 指定我們的環(huán)境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目標(biāo)瀏覽器
                                        targets:{
                                            "chrome":"88",
                                            "ie":"11" // 指定瀏覽器的一個(gè)版本
                                        },
                                        // 指定 corejs 版本
                                        "corejs":"3", // 用那個(gè)版本的 js
                                        // 使用 corejs 的方式
                                        "useBuiltIns":"usage", // usage 按需加載
                                    }
                                ]
                            ]
                        },
                    },
                    'ts-loader',
                ],
            },
            // 設(shè)置我們 less 文件的處理
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    // postcss
                    {
                        loader:'postcss-loader',
                        options:{  // 詳細(xì)配置
                            postcssOptions:{ // 指定 postcssOptions 要使用的一個(gè)插件  postcss-preset-env
                                plugins:[
                                    [
                                        "postcss-preset-env", 
                                        {
                                            browsers:'last 3 versions' // 瀏覽器信息，兼容三個(gè)全新版本的瀏覽器
                                        }                                        
                                    ]
                                ]
                            }
                        },
                    },
                    "less-loader",
                ]
            }
        ]
    },
    // 配置 webpack 插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template:'./src/index.html',
        })
    ],
    // 用來設(shè)置引用模塊
    resolve:{
        extensions:['.ts','.js'] // 以 .ts 和 .js 結(jié)尾的都可以當(dāng)模塊去引用
    }
}

到此這篇關(guān)于親自教你TypeScript 項(xiàng)目搭建過程的文章就介紹到這了,更多相關(guān)TypeScript 項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: