摘要：前言講起前端，我們就不能不講與，在這兩種技術(shù)廣泛應(yīng)用的今天，他們的擴(kuò)展也是層出不窮，的擴(kuò)展有等，的超集有等。如下注意你的樣式文件一定要在引入前先引入。截止目前，已經(jīng)發(fā)布了最新的版本。

前言：講起前端，我們就不能不講CSS與Javascript，在這兩種技術(shù)廣泛應(yīng)用的今天，他們的擴(kuò)展也是層出不窮，css的擴(kuò)展有Less、Sass、Stylus 等，js的超集有Typescript等。今天我們就簡(jiǎn)單來(lái)聊聊Less與Typescript以及靜態(tài)模塊打包器webpack。
本節(jié)目標(biāo)：本文為簡(jiǎn)單普及性知識(shí)，旨在讓大家了解并初步學(xué)會(huì)怎么去用這三項(xiàng)技術(shù)，以及這三項(xiàng)技術(shù)在開(kāi)發(fā)的過(guò)程中給我們帶來(lái)的便利性與好處，挑起大家對(duì)這三項(xiàng)技術(shù)的興趣，方便同學(xué)們課后去學(xué)習(xí)。
本文借鑒了以下同學(xué)的文章，特此感謝。

• HANS許的Less與TypeScript的簡(jiǎn)單理解與應(yīng)用，并使用WebPack打包靜態(tài)頁(yè)面
• dkvirus的三十分鐘學(xué)會(huì) Less。

一、Less

1、什么是Less？

Less是基于CSS的一種擴(kuò)展技術(shù)，包含變量、混合、函數(shù)、運(yùn)算，可以簡(jiǎn)化CSS代碼，降低維護(hù)成本。必須通過(guò)解析器將less文件轉(zhuǎn)換為css文件供頁(yè)面使用。Less讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。Less中文網(wǎng)。

2、為什么去用Less

我們?cè)谄匠eb開(kāi)發(fā)過(guò)程中寫(xiě)css是否碰到如下的情形：

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

以上是設(shè)置boder的css，但是現(xiàn)在我們要將3px改成5px怎么辦呢，我們就要一個(gè)個(gè)去改，如果多了我們就會(huì)很煩，還有可能漏掉一兩個(gè)沒(méi)改，在設(shè)置顏色中此類(lèi)問(wèn)題更為嚴(yán)重，優(yōu)秀的程序員怎么可能容忍這樣的情況呢，所以此時(shí)CSS的預(yù)編譯技術(shù)就出現(xiàn)了。在Less中我們就可以把上述代碼改寫(xiě)成如下：

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

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

3、Less語(yǔ)法概要

我們?cè)谶@里簡(jiǎn)單的說(shuō)幾點(diǎn)less的語(yǔ)法使用。
<1>、變量

//less寫(xiě)法
@color:#fff;
@classname: header;
.@classname{
	background-color:@color
}
//編譯后的css
.header{
	background-color:#fff
}

從例子中我們就可以看到，變量不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類(lèi)名：.@classname 表示的就是 .header，less編譯時(shí)使用 @ 符號(hào)獲取變量，僅僅將 @變量名 看成是一個(gè)字符串。這樣我們就有很多應(yīng)用場(chǎng)景了，可以讓我們的代碼減少了很多的重復(fù)性，也利于后期的修改與維護(hù)。
<2>、混合

//css語(yǔ)法
#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語(yǔ)法
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered;
}

#menu span {
    height: 16px;
    .bordered;
}

• 混合也是減少代碼書(shū)寫(xiě)量的一個(gè)方法；
• 混合的類(lèi)名在定義的時(shí)候加上小括弧 ()，那么在轉(zhuǎn)譯成 css 文件時(shí)就不會(huì)出現(xiàn)；
• 混合的類(lèi)名在被調(diào)用的時(shí)候加上小括弧 ()和不加上小括弧 ()是一樣的效果，看個(gè)人習(xí)慣

<3>、函數(shù)

// less語(yǔ)法
.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;
}

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

4、怎么去用Less

<1>、瀏覽器用法
我們先來(lái)講一下瀏覽器用法：
首先我們要先寫(xiě)好頁(yè)面所需要的less文件，然后引入less.js即可。如下：

Tips：注意你的less樣式文件一定要在引入less.js前先引入。
請(qǐng)?jiān)诜?wù)器環(huán)境下使用！本地直接打開(kāi)可能會(huì)報(bào)錯(cuò)！

當(dāng)瀏覽器加載后less.js后文件，會(huì)去解析rel為stylesheet/less文件，并將轉(zhuǎn)譯后的內(nèi)容生成style元素內(nèi)嵌在HTML的head節(jié)點(diǎn)中，如下圖：

此種方式缺點(diǎn)：耗性能，優(yōu)點(diǎn)：簡(jiǎn)單開(kāi)發(fā)時(shí)候無(wú)需一直預(yù)編譯；

<2>、服務(wù)端用法
我們可以用nodejs將less文件編譯成css，再引用css文件。
上節(jié)課我們已經(jīng)講過(guò)了npm與nodejs的用法，接下來(lái)我們就演示一遍全局安裝less：

命令為 npm install -g less

本節(jié)旨在教會(huì)大家如何使用less以及l(fā)ess的基本語(yǔ)法，這里還有許多好用的語(yǔ)法沒(méi)有講到，比如內(nèi)置函數(shù)、運(yùn)算、神奇的import等等。less的語(yǔ)法與魅力請(qǐng)有興趣的同學(xué)移步Less中文網(wǎng)或者本人將在未來(lái)寫(xiě)一篇有關(guān)Less的詳細(xì)文章，敬請(qǐng)期待。

二、TypeScript

1、什么是Typescript？

TypeScript是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。它是JavaScript的一個(gè)超集，而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類(lèi)型和基于類(lèi)的面向?qū)ο缶幊?。截止目前，Typescript已經(jīng)發(fā)布了最新的3.1版本。Typescript中文網(wǎng);下圖為T(mén)ypescript與ES6、ES5的關(guān)系。Typescript包含了ES6與ES5,簡(jiǎn)而言之，我們可以在Typescript寫(xiě)ES6與ES5的語(yǔ)法。

2、為什么要去用Typescript？

<1>、TypeScript的設(shè)計(jì)目的應(yīng)該是解決JavaScript的“痛點(diǎn)”：弱類(lèi)型和沒(méi)有命名空間，導(dǎo)致很難模塊化，不適合開(kāi)發(fā)大型程序。另外它還提供了一些語(yǔ)法糖來(lái)幫助大家更方便地實(shí)踐面向?qū)ο蟮木幊獭?br /> <2>、Typescript越來(lái)越在前端流行與廣泛使用，在最新的TIOBE的編程語(yǔ)言排行榜中，成為最大的黑馬，從第167名上升至49名，所以對(duì)于想要做好web的我們，了解并熟練掌握Typescript變得極為重要。

3、Typescript常用語(yǔ)法概要

我們接下來(lái)稍微介紹一下Typescript的常用語(yǔ)法：
<1>、數(shù)據(jù)類(lèi)型

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

Typescript為了使代碼更加規(guī)范與更容易維護(hù)，新增了數(shù)據(jù)類(lèi)型校驗(yàn)：

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

但是在Typescript這樣寫(xiě)是錯(cuò)誤的。寫(xiě)ts變量時(shí)必須指定數(shù)據(jù)類(lèi)型。

//ts寫(xiě)法
var flag:boolean=true;
flag=1;//直接報(bào)錯(cuò)。

<2>、類(lèi)

//ts語(yǔ)法
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());

我們可以看到,其實(shí)Ts的類(lèi)跟我們后端語(yǔ)言C#之類(lèi)的非常相像。

4、如何使用Typescript

<1>、安裝Typescript
瀏覽器不能直接識(shí)別Typescript文件，必須由編譯器編譯成JS才可以，Visual Studio 2017和Visual Studio 2015 Update 3默認(rèn)包含了TypeScript。 如果你的Visual Studio還沒(méi)有安裝TypeScript，你可以下載它。
既然我們講到了npm，我們也可以用npm去安裝Typescript。

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

<2>、最簡(jiǎn)單的編譯操作
接下來(lái)我們來(lái)演示一下最簡(jiǎn)單的編譯一個(gè)ts文件的操作。
首先我們新建一個(gè)ts文件

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

<3> 、配置配置文件
我們?nèi)绻獙⒁粋€(gè)Typescript文件（.ts文件）編譯成一個(gè)js文件，那么每次都要去運(yùn)行tsc命令是不是很煩呢，那如果要編譯整個(gè)項(xiàng)目呢？有沒(méi)有那種我們邊寫(xiě)ts邊生成js的方法呢？答案肯定是有的。接下來(lái)我們?nèi)ヅ渲门渲梦募?br /> 我們?nèi)ミ\(yùn)行tsc --init命令，在項(xiàng)目的根目錄生成tsconfig.json的配置文件

如果一個(gè)目錄下存在一個(gè)tsconfig.json文件，那么它意味著這個(gè)目錄是TypeScript項(xiàng)目的根目錄。 tsconfig.json文件中指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)。 一個(gè)項(xiàng)目可以通過(guò)以下方式之一來(lái)編譯：

• 不帶任何輸入文件的情況下調(diào)用tsc，編譯器會(huì)從當(dāng)前目錄開(kāi)始去查找tsconfig.json文件，逐級(jí)向上搜索父目錄。
• 不帶任何輸入文件的情況下調(diào)用tsc，且使用命令行參數(shù)--project（或-p）指定一個(gè)包含tsconfig.json文件的目錄。
• 當(dāng)命令行上指定了輸入文件時(shí)，tsconfig.json文件會(huì)被忽略。

接下來(lái)我們根據(jù)tsconfig.json文件與vscode來(lái)配置一個(gè)在編寫(xiě)ts文件時(shí)按保存可以時(shí)時(shí)編譯成js文件的方法：
首先，我們先在項(xiàng)目的根目錄建一個(gè)ts文件：

然后，我們?nèi)sconfig.json配置要生成的js目錄：

接下來(lái)點(diǎn)擊vs上方菜單的終端，點(diǎn)擊運(yùn)行任務(wù)，選擇tsc-監(jiān)視：

此時(shí)終端會(huì)顯示成這樣，證明監(jiān)視成功：

我們?cè)趖s文件中寫(xiě)ts代碼，按ctrl+s保存時(shí)，會(huì)自動(dòng)在我們?cè)O(shè)置好的目錄下生成js文件：

配置項(xiàng)的具體含義請(qǐng)移步官網(wǎng)的Typescript配置項(xiàng)說(shuō)明

TS的使用方法及簡(jiǎn)要語(yǔ)法就先介紹到這里，有興趣的同學(xué)可以移步Typescript的中文官網(wǎng)或者本來(lái)在未來(lái)將會(huì)寫(xiě)一篇有關(guān)typescript的詳細(xì)文章，敬請(qǐng)期待。

三、webpack

1、什么是webpack？

在當(dāng)今的社會(huì)，作為 web 開(kāi)發(fā)，會(huì)越來(lái)越意識(shí)到前端的重要性，隨著 HTML5、 CSS3、 ES6 各種技術(shù)的發(fā)展，前端的開(kāi)發(fā)越來(lái)越龐大。甚至有些應(yīng)用就是單頁(yè)面應(yīng)用(SPA)，純 JavaScript 開(kāi)發(fā)，JavaScript 文件的管理也是一個(gè)問(wèn)題。JavaScript 模塊化編程，已經(jīng)成為一個(gè)迫切的需求，這就出現(xiàn)了 JavaScript 的模塊解決方案。webpack是一個(gè)前端模塊化方案，更側(cè)重模塊打包，我們可以把開(kāi)發(fā)中的所有資源（圖片、js 文件、css 文件等）都看成模塊，通過(guò) loader（加載器）和 plugins（插件）對(duì)資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。
總的來(lái)說(shuō)就是如下圖：

2、如何使用webpack

<1> 、安裝webpack
安裝webpack首先必須要有nodejs的環(huán)境，我們用npm工具去安裝webpack，命令為：

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

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

<2> 、簡(jiǎn)單上手webpack
接下來(lái)我們來(lái)做一個(gè)最簡(jiǎn)單的webpack的打包編譯。
我首先在vscode新建一個(gè)文件夾webpackDemo,新建一個(gè)hellowebpack.js的文件，寫(xiě)幾句js代碼
接下來(lái)我們?cè)谶@個(gè)目錄下運(yùn)行命令：

從警告信息中我們就可以知道，我們沒(méi)有設(shè)定mode，webpack分為開(kāi)發(fā)模式和生產(chǎn)模式。我們看下這兩種模式的編譯

從圖中我們也能看出來(lái)production編譯出來(lái)的明顯比較小。
上面這種方法是全局去告訴webpack要編譯哪個(gè)文件，那我們也可以用另外一種方法：
我們先用 npm init -y 初始化項(xiàng)目，新建一個(gè)package.json文件。

我們?cè)儆?-save -dev安裝局部本地依賴，此時(shí)package.json就會(huì)有安裝依賴包的信息：

這里面包含了項(xiàng)目的很多信息，記錄項(xiàng)目的描述信息：項(xiàng)目作者、項(xiàng)目描述、項(xiàng)目依賴哪些包、插件配置信息等等。
其中scripts對(duì)象是指定了運(yùn)行腳本命令的npm命令行縮寫(xiě)
我們將test改為build，用來(lái)簡(jiǎn)寫(xiě)webpack。注意此文件應(yīng)放在src文件夾下，當(dāng)webpack打包時(shí)會(huì)默認(rèn)去此文件夾下找。

此時(shí)我們?nèi)?zhí)行 npm run build命令，就能編譯到dist文件夾下的main.js.

學(xué)會(huì)了這個(gè)簡(jiǎn)單的webpack打包，我們能不能讓webpack自動(dòng)幫我們創(chuàng)建html并將js引入進(jìn)去呢？
接下來(lái)我們來(lái)進(jìn)行一下嘗試。
首先，我們先用npm init -y命令初始化項(xiàng)目。

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

之后我們?cè)诟夸泟?chuàng)建一個(gè)webpack.config.js的配置文件，寫(xiě)入入口文件：

那現(xiàn)在我們要讓webpack幫我們創(chuàng)建html文件且引入js文件，就需要用到webpack的一個(gè)插件 【HtmlWebpackPlugin】，我們可以去官網(wǎng)查看此插件的用法，傳送門(mén)

我們局部安裝此插件：

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

這里的HtmlWebpackPlugin()有一堆的參數(shù)，我們這里篇幅有限，只做簡(jiǎn)要的介紹，具體的更多功能請(qǐng)移步官網(wǎng)查看詳解。
此時(shí)我們?cè)偈褂脀ebpack --mode production 命令編譯項(xiàng)目，webpack就會(huì)幫我們創(chuàng)建好html，并引入進(jìn)去了。

webpack簡(jiǎn)要的概述就講到這里，還有興趣的同學(xué)可以自行去官網(wǎng)學(xué)習(xí)，或者關(guān)注本博客，將會(huì)在未來(lái)推出更加詳細(xì)的有關(guān)webpack的介紹。

總結(jié)：本篇文章我們簡(jiǎn)要講了Less、Typescript與模塊打包器webpack，這三樣技術(shù)在未來(lái)的web應(yīng)用的開(kāi)發(fā)絕對(duì)是一種不可阻擋的趨勢(shì)。通過(guò)本篇文章的學(xué)習(xí)，我們已經(jīng)能夠初步的創(chuàng)建一個(gè)前端程序，并用webpack打包。這不管對(duì)于前端開(kāi)發(fā)者還是全棧開(kāi)發(fā)者，都是不可繞過(guò)的門(mén)檻，希望讀者能繼續(xù)深入學(xué)習(xí)，有疑問(wèn)的可留言一起探討學(xué)習(xí)。