自学 TypeScript 第四天,手把手项目搭建

  • 自学 TypeScript 第四天,手把手项目搭建已关闭评论
  • 11 次浏览
  • A+
所属分类:Web前端
摘要

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


前言:

学了三天,我们学习了 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个版本最新的浏览器

项目初始化目录:

自学 TypeScript 第四天,手把手项目搭建

 

 

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;         }  

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

自学 TypeScript 第四天,手把手项目搭建

 

 

 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 结尾的都可以当模块去引用     } }