親自教你TypeScript 項目搭建過程
前言：
學了三天，我們學習了 TS 的基本類型聲明，TS 的編譯，webpack 打包，其實也就差不多了，剩下的也就一些 類，繼承，構造函數，抽象類，泛型一些的，如果都細致的講可能寫好久，感興趣的可以自己找資料細致的去學一下
學習代碼或一個新語法，最好的方法無非就是做項目，從這個過程中學會如何去使用，怎么去寫
廢話不多說，我們開始今天的貪吃蛇項目初始化
項目搭建，初始化：
我記得前一天，我們配置過一份 webpack 配置，直接復制過來使用，這里就不多說了，然后就是在項目中引入我們的 less
npm i -D less less-loader css-loader style-loader
什么什么杠 loader ，就是把什么和 webpack 進行一個整合
安裝好我們去配置一下，之前我們的文件只對 ts 進行了一個處理，現在我們要對 less 進行一個處理，所以要在 rules 里新加一個規(guī)則對象
{
test:/\.less$/,
} 首先我們先用 test 指定我們的規(guī)則生效文件
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}其次我們在 use 進行配置 loader 這里記住 use 的執(zhí)行順序是從下到上執(zhí)行的，這里我想讓它先執(zhí)行 less-loader 最后執(zhí)行 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 配置詳情 在文章最下邊
貪吃蛇，項目頁面：
配置完成之后，接下來為們來做我們的項目頁面
首先我們先打開我們的 開發(fā)服務器， npmstart
啟動成功之后，我們就獲得了一個可實時更新的 html 頁面
1，游戲主容器
第一步我們先構建我們的游戲窗口，也就是我們貪吃蛇的可視區(qū)范圍
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，貪吃蛇移動區(qū)域和菜單區(qū)域
設置完成我們的主容器，開始寫我們的貪吃蛇移動區(qū)域和菜單區(qū)域
index.html 文件
<!-- 創(chuàng)建我們的游戲的主容器 -->
<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>
<!-- 創(chuàng)建我們的游戲的主容器 -->
<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:{
// 指定加載的規(guī)則
rules:[
{
// test 指定的是規(guī)則生效的文件
test:/\.ts$/, // 所有以 ts 結尾的文件
// use:'ts-loader',
use:[
// 配置我們的 babel
{
// 指定我們的加載器
loader:"babel-loader",
// 配置我們的babel
options:{
// 設置預定的環(huán)境
presets:[
[
// 指定我們的環(huán)境插件
"@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 結尾的都可以當模塊去引用
}
}到此這篇關于親自教你TypeScript 項目搭建過程的文章就介紹到這了,更多相關TypeScript 項目搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js?canvas實現飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
淺談js對象的創(chuàng)建和對6種繼承模式的理解和遐想
下面小編就為大家?guī)硪黄獪\談js對象的創(chuàng)建和對6種繼承模式的理解和遐想。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文給大家分享的是使用javascript實現的數組轉換json的代碼，非常簡單實用，相當于JSON.stringify(array);，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要為大家詳細介紹了原生JavaScript輪播圖實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
BootStrap fileinput.js文件上傳組件實例代碼
這篇文章主要介紹了BootStrap fileinput.js文件上傳組件實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了JS面試之console的異步性怎么理解詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了JS實現手風琴特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
概述BootStrap中role="form"及role作用角色
這篇文章主要介紹了BootStrap中role="form"及role作用角色介紹，以及bootstrap柵欄系統(tǒng)css中的col-xs-*,col-sm-*,col-md-* 的意義簡單介紹，需要的朋友參考下2016-12-12
有的時候要獲取當前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關于js根據當前日期獲取前一周或者后一周等日期的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04