親自教你TypeScript 項目搭建過程
前言:
學瞭三天,我們學習瞭 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 配置詳情 在文章最下邊
貪吃蛇,項目頁面:
配置完成之後,接下來為們來做我們的項目頁面
首先我們先打開我們的 開發服務器, npmstart
啟動成功之後,我們就獲得瞭一個可實時更新的 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 結尾的都可以當模塊去引用 } }
到此這篇關於親自教你TypeScript 項目搭建過程的文章就介紹到這瞭,更多相關TypeScript 項目搭建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue導入.md文件的步驟(markdown轉HTML)
- 使用webpack手動搭建vue項目的步驟
- 帶你瞭解CSS基礎知識,樣式
- 教你使用webpack打包編譯TypeScript代碼
- JQuery實現電梯導航特效