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

来源:https://www.cnblogs.com/hongxuquan/archive/2019/01/10/10252939.html
-Advertisement-
Play Games

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


前言:講起前端,我們就不能不講CSS與Javascript,在這兩種技術廣泛應用的今天,他們的擴展也是層出不窮,css的擴展有Less、Sass、Stylus 等,js的超集有Typescript等。今天我們就簡單來聊聊Less與Typescript以及靜態模塊打包器webpack。
本節目標:本文為簡單普及性知識,旨在讓大家瞭解並初步學會怎麼去用這三項技術,以及這三項技術在開發的過程中給我們帶來的便利性與好處,挑起大家對這三項技術的興趣,方便同學們課後去學習。
本文藉鑒了以下同學的文章,特此感謝。

一、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的語法。
enter description here

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打包。這不管對於前端開發者還是全棧開發者,都是不可繞過的門檻,希望讀者能繼續深入學習,有疑問的可留言一起探討學習。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 監控 redis 執行命令 Intro 最近在用 redis 的時候想看看執行了哪些命令,於是發現了 redis cli 提供的 命令,直接使用這個就可以監控執行的大部分 redis 命令,之所以說是大部分,是因為有一些命令如: 出於安全原因是不會記錄的。 Monitor 是調試用的命令 Redis ...
  • MongoDB介紹 MongoDB是一個基於分散式文件存儲的開源文檔資料庫。由C++語言編寫。旨在為WEB應用提供高性能、高可用性和高伸縮數據存儲解決方案。 MongoDB優點 MongoDB使用場景 數據緩存 由於性能很高,MongoDB適合作為信息基礎設施的緩存層。在系統重啟之後,由MongoD ...
  • 一、oc代碼 提示:看本文章之前,最好按順序來看; //代碼 //列印 分析: 1)三個block的類型分別為:__NSGlobalBlock__、__NSMallocBlock__、__NSStackBlock__,什麼原因,往下看; 2)上述三種類型最終都是繼承自NSBlock,而NSBlock ...
  • 本文用來介紹 iOS 多線程中 GCD 的相關知識以及使用方法。這大概是史上最詳細、清晰的關於 GCD 的詳細講解+總結的文章了。通過本文,您將瞭解到: 1. GCD 簡介 2. GCD 任務和隊列 3. GCD 的使用步驟 4. GCD 的基本使用(6種不同組合區別) 5. GCD 線程間的通信 ...
  • 一,效果圖。 二,代碼。 參考資料:《菜鳥教程》 ...
  • h1{ /*文字陰影*/ font-size: 100px; text-shadow: 10px 3px 3px rgba(0,0,0,.5) ; } div{ /*盒子陰影*/ width: 200px; height: 200px; border: 10px solid #cccccc; /*b ...
  • 首先來解釋一下啥是事件冒泡現象 事件冒泡: 多個元素嵌套,有層次關係,這些元素都註冊了相同的事件,如果裡面的元素的出發了事件,外面的元素該事件也觸發 在這裡有必要強調一下 相同的事件 不一定完全相同 即 都是 點擊事件 或者 都是 滑鼠移入事件 來個例子 先寫出來這三個div的結構 再給他們寫好樣式 ...
  • 1.module、export、import是什麼,有什麼作用? 2.日常前端代碼開發中,有哪些值得用ES6去改進的編程優化或者規範? 3.請你談談Cookie的弊端? 4.git fetch和git pull的區別? 5.svn與git的區別? ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...