前端常用技術概述——Less、typescript與webpack

前言：講起前端，我們就不能不講CSS與Javascript，在這兩種技術廣泛應用的今天，他們的擴展也是層出不窮，css的擴展有Less、Sass、Stylus 等，js的超集有Typescript等。今天我們就簡單來聊聊Less與Typescript以及靜態模塊打包器webpack。

本節目標：本文為簡單普及性知識，旨在讓大家了解並初步學會怎麼去用這三項技術，以及這三項技術在開發的過程中給我們帶來的便利性與好處，挑起大家對這三項技術的興趣，方便同學們課後去學習。

本文借鑒了以下同學的文章，特此感謝。

• HANS許的Less與TypeScript的簡單理解與應用，並使用WebPack打包靜態頁面
• dkvirus的三十分鐘學會 Less。

一、Less

1、什麼是Less？

Less是基於CSS的一種擴展技術，包含變數、混合、函數、運算，可以簡化CSS代碼，降低維護成本。必須通過解析器將less文件轉換為css文件供頁面使用。Less讓 CSS 更易維護、方便製作主題、擴充。Less 可以運行在 Node 或瀏覽器端。Less中文網。

2、為什麼去用Less

我們在平常web開發過程中寫css是否碰到如下的情形：

.border{
boder-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

以上是設置boder的css，但是現在我們要將3px改成5px怎麼辦呢，我們就要一個個去改，如果多了我們就會很煩，還有可能漏掉一兩個沒改，在設置顏色中此類問題更為嚴重，優秀的程序員怎麼可能容忍這樣的情況呢，所以此時CSS的預編譯技術就出現了。在Less中我們就可以把上述代碼改寫成如下：

@borderSize:3px
.border{
boder-radius:@borderSize;
-webkit-border-radius:@borderSize;
-moz-border-radius:@borderSize;
}

上面就是Less的語法-變數的一種形式，如果我們此時要去改變border的大小我們只要改變borderSize的值即可。

3、Less語法概要

我們在這裡簡單的說幾點less的語法使用。

<1>、變數

//less寫法
@color:#fff;
@classname: header;
.@classname{
background-color:@color
}
//編譯後的css
.header{
background-color:#fff
}

從例子中我們就可以看到，變數不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類名：.@classname 表示的就是 .header，less編譯時使用 @ 符號獲取變數，僅僅將 @變數名 看成是一個字元串。這樣我們就有很多應用場景了，可以讓我們的代碼減少了很多的重複性，也利於後期的修改與維護。

<2>、混合

//css語法
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
//less語法
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
#menu span {
height: 16px;
.bordered;
}

• 混合也是減少代碼書寫量的一個方法；
• 混合的類名在定義的時候加上小括弧 ()，那麼在轉譯成 css 文件時就不會出現；
• 混合的類名在被調用的時候加上小括弧 ()和不加上小括弧 ()是一樣的效果，看個人習慣

<3>、函數

// less語法
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
//編譯成css
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

可以看到，這裡就用到了函數的概念，在 #header 和 .button 中分別傳入不同的參數，結果也就生成不同的代碼。

4、怎麼去用Less

<1>、瀏覽器用法

我們先來講一下瀏覽器用法：

首先我們要先寫好頁面所需要的less文件，然後引入less.js即可。如下：

Tips：注意你的less樣式文件一定要在引入less.js前先引入。

請在伺服器環境下使用！本地直接打開可能會報錯！

當瀏覽器載入後less.js後文件，會去解析rel為stylesheet/less文件，並將轉譯後的內容生成style元素內嵌在HTML的head節點中，如下圖：

此種方式缺點：耗性能，優點：簡單開發時候無需一直預編譯；

<2>、服務端用法

我們可以用nodejs將less文件編譯成css，再引用css文件。

上節課我們已經講過了npm與nodejs的用法，接下來我們就演示一遍全局安裝less：

命令為 npm install -g less

這樣我們就安裝了less，我們也可以看less的編譯器lessc的版本，那我們如何將一個less文件編譯成一個css文件呢？

利用less編譯器即可將指定的less文件編譯成css到指定的目錄底下。

缺點：使用麻煩 優點：提高站點性能；

本節旨在教會大家如何使用less以及less的基本語法，這裡還有許多好用的語法沒有講到，比如內置函數、運算、神奇的import等等。less的語法與魅力請有興趣的同學移步Less中文網或者本人將在未來寫一篇有關Less的詳細文章，敬請期待。

二、TypeScript

1、什麼是Typescript？

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。截止目前，Typescript已經發布了最新的3.1版本。Typescript中文網;下圖為Typescript與ES6、ES5的關係。Typescript包含了ES6與ES5,簡而言之，我們可以在Typescript寫ES6與ES5的語法。

2、為什麼要去用Typescript？

<1>、TypeScript的設計目的應該是解決JavaScript的「痛點」：弱類型和沒有命名空間，導致很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向對象的編程。

<2>、Typescript越來越在前端流行與廣泛使用，在最新的TIOBE的編程語言排行榜中，成為最大的黑馬，從第167名上升至49名，所以對於想要做好web的我們，了解並熟練掌握Typescript變得極為重要。

3、Typescript常用語法概要

我們接下來稍微介紹一下Typescript的常用語法：

<1>、數據類型

布爾類型:boolean
數字類型:number
字元串類型:string
數組類型:array
元組類型:tuple
枚舉類型:enum(新)
任意類型:any(新)
null和undefined
void類型(新)
never類型(新)

Typescript為了使代碼更加規範與更容易維護，新增了數據類型校驗：

//js代碼,es5的正確寫法
var flag=true;
flag=1;

但是在Typescript這樣寫是錯誤的。寫ts變數時必須指定數據類型。

//ts寫法
var flag:boolean=true;
flag=1;//直接報錯。

<2>、類

//ts語法
class person{
name:string;
constructor(name:string){
this.name=name
}
getname():string{
return this.name;
};
setname(name:string):void{
this.name=name;
}
}
var p= new person("張三");
alert( p.getname());
p.setname("李四");
alert(p.getname())
//編譯後的js
var person = /** @class */ (function () {
function person(name) {
this.name = name;
}
person.prototype.getname = function () {
return this.name;
};
;
person.prototype.setname = function (name) {
this.name = name;
};
return person;
}());
var p = new person("張三");
alert(p.getname());
p.setname("李四");
alert(p.getname());

我們可以看到,其實Ts的類跟我們後端語言C#之類的非常相像。

4、如何使用Typescript

<1>、安裝Typescript

瀏覽器不能直接識別Typescript文件，必須由編譯器編譯成JS才可以，Visual Studio 2017和Visual Studio 2015 Update 3默認包含了TypeScript。 如果你的Visual Studio還沒有安裝TypeScript，你可以下載它。

既然我們講到了npm，我們也可以用npm去安裝Typescript。

如圖，我們也可以去看Typescript的編譯器的版本。

<2>、最簡單的編譯操作

接下來我們來演示一下最簡單的編譯一個ts文件的操作。

首先我們新建一個ts文件

然後使用 tsc tsdemo.ts命令編譯成tsdemo.js文件，演示如下：

<3> 、配置配置文件

我們如果要將一個Typescript文件（.ts文件）編譯成一個js文件，那麼每次都要去運行tsc命令是不是很煩呢，那如果要編譯整個項目呢？有沒有那種我們邊寫ts邊生成js的方法呢？答案肯定是有的。接下來我們去配置配置文件。

我們去運行tsc --init命令，在項目的根目錄生成tsconfig.json的配置文件

如果一個目錄下存在一個tsconfig.json文件，那麼它意味著這個目錄是TypeScript項目的根目錄。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。 一個項目可以通過以下方式之一來編譯：

• 不帶任何輸入文件的情況下調用tsc，編譯器會從當前目錄開始去查找tsconfig.json文件，逐級向上搜索父目錄。
• 不帶任何輸入文件的情況下調用tsc，且使用命令行參數--project（或-p）指定一個包含tsconfig.json文件的目錄。
• 當命令行上指定了輸入文件時，tsconfig.json文件會被忽略。

接下來我們根據tsconfig.json文件與vscode來配置一個在編寫ts文件時按保存可以時時編譯成js文件的方法：

首先，我們先在項目的根目錄建一個ts文件：

然後，我們去tsconfig.json配置要生成的js目錄：

接下來點擊vs上方菜單的終端，點擊運行任務，選擇tsc-監視：

此時終端會顯示成這樣，證明監視成功：

我們在ts文件中寫ts代碼，按ctrl+s保存時，會自動在我們設置好的目錄下生成js文件：

配置項的具體含義請移步官網的Typescript配置項說明

TS的使用方法及簡要語法就先介紹到這裡，有興趣的同學可以移步Typescript的中文官網或者本來在未來將會寫一篇有關typescript的詳細文章，敬請期待。

三、webpack

1、什麼是webpack？

在當今的社會，作為 web 開發，會越來越意識到前端的重要性，隨著 HTML5、 CSS3、 ES6 各種技術的發展，前端的開發越來越龐大。甚至有些應用就是單頁面應用(SPA)，純 JavaScript 開發，JavaScript 文件的管理也是一個問題。JavaScript 模塊化編程，已經成為一個迫切的需求，這就出現了 JavaScript 的模塊解決方案。webpack是一個前端模塊化方案，更側重模塊打包，我們可以把開發中的所有資源（圖片、js 文件、css 文件等）都看成模塊，通過 loader（載入器）和 plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。

總的來說就是如下圖：

2、如何使用webpack

<1> 、安裝webpack

安裝webpack首先必須要有nodejs的環境，我們用npm工具去安裝webpack，命令為：

npm install -g webpack
/*在webpack 3中，webpack本身和它的CLI以前都是在同一個包中，但在第4版中，他們已經將兩者分開來更好地管理它們*/
npm install -g webpack-cli

安裝完畢後我們查看版本如下圖：

<2> 、簡單上手webpack

接下來我們來做一個最簡單的webpack的打包編譯。

我首先在vscode新建一個文件夾webpackDemo,新建一個hellowebpack.js的文件，寫幾句js代碼

接下來我們在這個目錄下運行命令：

從警告信息中我們就可以知道，我們沒有設定mode，webpack分為開發模式和生產模式。我們看下這兩種模式的編譯

從圖中我們也能看出來production編譯出來的明顯比較小。

上面這種方法是全局去告訴webpack要編譯哪個文件，那我們也可以用另外一種方法：

我們先用 npm init -y 初始化項目，新建一個package.json文件。

我們再用--save -dev安裝局部本地依賴，此時package.json就會有安裝依賴包的信息：

這裡面包含了項目的很多信息，記錄項目的描述信息：項目作者、項目描述、項目依賴哪些包、插件配置信息等等。

其中scripts對象是指定了運行腳本命令的npm命令行縮寫

我們將test改為build，用來簡寫webpack。注意此文件應放在src文件夾下，當webpack打包時會默認去此文件夾下找。

此時我們去執行 npm run build命令，就能編譯到dist文件夾下的main.js.

學會了這個簡單的webpack打包，我們能不能讓webpack自動幫我們創建html並將js引入進去呢？

接下來我們來進行一下嘗試。

首先，我們先用npm init -y命令初始化項目。

然後再局部引入webpack與webpack-cli

之後我們在根目錄創建一個webpack.config.js的配置文件，寫入入口文件：

那現在我們要讓webpack幫我們創建html文件且引入js文件，就需要用到webpack的一個插件 【HtmlWebpackPlugin】，我們可以去官網查看此插件的用法，傳送門

我們局部安裝此插件：

並去webpack.config.js配置好此插件：

這裡的HtmlWebpackPlugin()有一堆的參數，我們這裡篇幅有限，只做簡要的介紹，具體的更多功能請移步官網查看詳解。

此時我們再使用webpack --mode production 命令編譯項目，webpack就會幫我們創建好html，並引入進去了。

webpack簡要的概述就講到這裡，還有興趣的同學可以自行去官網學習，或者關注本博客，將會在未來推出更加詳細的有關webpack的介紹。

總結：本篇文章我們簡要講了Less、Typescript與模塊打包器webpack，這三樣技術在未來的web應用的開發絕對是一種不可阻擋的趨勢。通過本篇文章的學習，我們已經能夠初步的創建一個前端程序，並用webpack打包。這不管對於前端開發者還是全棧開發者，都是不可繞過的門檻，希望讀者能繼續深入學習，有疑問的可留言一起探討學習。

作者：打傘的魚l

原文：https://www.cnblogs.com/hongxuquan/p/10252939.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！