JavaScript 構(gòu)建工具有哪些

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript 構(gòu)建工具有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1、轉(zhuǎn)譯

通過轉(zhuǎn)譯Transpiling，開發(fā)者可以使用到語言最新、最熱門的更新和擴(kuò)展，并保持瀏覽器的兼容性等。下面是使用 Babel 的一個(gè)例子:

// 數(shù)組映射中的箭頭函數(shù)語法const double = [1, 2, 3].map((num) => num * 2);// 轉(zhuǎn)譯后const double = [1, 2, 3].map(function(num) {  return num * 2;});

2、分包

分包Bundling是處理所有 import 與require 語句的過程；找到相匹配的 JavaScript 代碼片段、包和庫；將它們添加到適當(dāng)?shù)挠蛑?；然后將它們打包到一個(gè)大的 JavaScript 文件中。常用的分包器包括 Browserify、Webpack 與 Parcel。

3、壓縮

壓縮Minifing是通過刪除空白和代碼注釋來減少最終的文件大小。在壓縮過程中，我們還可以更進(jìn)一步添加代碼混淆步驟，混淆會(huì)更改變量名和方法名，使代碼變得晦澀難懂，因此一旦代碼交付到客戶端，它就不是那么容易能讓人讀懂。下面是一個(gè)使用 Grunt 的例子:

// 壓縮前const double = [1, 2, 3].map(function(num) {  return num * 2;});// 壓縮后const double=[1,2,3].map(function(num){return num*2;});

4、打包

完成上面的所有步驟之后, 我們需要將這些具有兼容性、且經(jīng)過分包、壓縮/混淆過的文件放置到某個(gè)地方。打包Packaging正是這樣一個(gè)過程，它將上述步驟所產(chǎn)生的結(jié)果放置到開發(fā)者指定的某個(gè)位置上，這通常是通過打包器完成的。

前端構(gòu)建工具

前端工具及構(gòu)建工具可以分為以下幾類:

• 包管理: NPM、Yarn

• 轉(zhuǎn)譯器: Babel 等

• 打包器: Webpack、Parcel、Browserify

• 壓縮混淆: UglifyJS、Packer、Minify 等

JavaScript 生態(tài)系統(tǒng)中有各種各樣的構(gòu)建工具可以使用，包括下面的這些：

Grunt 和 Bower

Grunt 是作為命令行工具引入的，它僅提供一個(gè)腳本來指定和配置相關(guān)構(gòu)建任務(wù)。Bower 作為包管理器，提供了一種客戶端包的管理方法而緊追其后。這兩者，再加上  NPM，它們經(jīng)常在一起使用，它們看上去似乎可以滿足大多數(shù)的自動(dòng)化需求，但 Grunt 的問題在于它無法提供給開發(fā)者配置更復(fù)雜任務(wù)的自由，而  Bower 使開發(fā)者管理的程序包是平常的兩倍，因?yàn)樗鼘⑶岸税⒑笈_(tái)包分開了（例如，Bower 組件與 Node 模塊）。

Grunt 與 Bower 的未來： Grunt 與 Bower 正在退出 JavaScript 工具生態(tài)，但是還有一些替代品。

Gulp 和 Browserify

Gulp 是在  Grunt 發(fā)布一年半之后才發(fā)布的。但 Gulp 卻讓大家感到很自然、舒服。用 JavaScript 來寫構(gòu)建腳本與用 JSON  來寫相比更自由。你可以在 Gulp 的構(gòu)建腳本中編寫函數(shù)、即時(shí)創(chuàng)建變量、在任何地方使用條件語句 ——  但就這些，并不能說讓我們的感覺變得特別自然和舒適，只能說這只是其中的一個(gè)可能的原因。Browserify 和 Gulp 可以配合使用，Browserify 允許 NPM 包（用于后端 Node 服務(wù)器）被直接帶入到前端，就這一點(diǎn)已經(jīng)直接讓 Bower 廢了。而正是這種用一個(gè)包管理器來處理前后端包的方式讓人感到更自然和更好。

Gulp 的未來： Gulp 可能會(huì)被改進(jìn)，以便匹配當(dāng)前流行的構(gòu)建工具，但這完全取決于創(chuàng)造者的意愿。Gulp 仍在使用中，只是不再像以前那么流行了。

Webpack 和 NPM/Yarn 腳本

Webpack 是現(xiàn)代前端開發(fā)工具中最熱門的寵兒，它是一個(gè)開源的  JavaScript 模塊打包器。Webpack 主要是為處理 JavaScript 而創(chuàng)造的，但如果包含相應(yīng)的加載器，它也可以轉(zhuǎn)換  HTML、CSS 和圖片等前端資源。通過 Webpack，你也可以像 Gulp 一樣編寫構(gòu)建腳本，并通過 NPM/Yarn 來執(zhí)行它們。

Webpack 的未來： Webpack 是目前 JavaScript  工具生態(tài)系統(tǒng)中最熱門的工具，最近幾乎所有的 JavaScript 庫都在使用 React 和 Webpack。Webpack  目前處于第四個(gè)版本，不會(huì)很快消失。（LCTT 譯注：Webpack 目前已經(jīng)發(fā)布了第五個(gè)版本了，且還在火熱更新中）

Parcel

Parcel 是一個(gè)  Web 應(yīng)用打包器，于 2018 年推出，因其開發(fā)者體驗(yàn)而與眾不同。Parcel 能利用處理器多核功能提供極快的打包性能，且還零配置。但  Parcel 還是一個(gè)新星，對(duì)于一些大型應(yīng)用，其采用率并不高。相比之下，開發(fā)人員更喜歡使用 Webpack，因?yàn)?Webpack  有更廣泛的支持和可定制性。

Parcel 的未來： Parcel 非常容易使用，如果你統(tǒng)計(jì)打包和構(gòu)建時(shí)間，它會(huì)比 Webpack 更快，而且它還提供了更好的開發(fā)者體驗(yàn)。Parcel 沒有被大量采用的原因可能是它仍然比較新。在前端構(gòu)建工具的生態(tài)系統(tǒng)中，Parcel 的前景會(huì)非常光明，它將會(huì)存在一段時(shí)間。

Rollup

Rollup 是 JavaScript 的一個(gè)模塊分包器，它可將一小段代碼編譯為更大更復(fù)雜的庫或應(yīng)用。Rollup 一般建議用來構(gòu)建 JavaScript 庫，特別是那種導(dǎo)入和依賴的第三方庫較少的那種庫。

Rollup 的未來： Rollup 很酷，且正在被迅速采用。它有很多強(qiáng)大的功能，將在很長一段時(shí)間內(nèi)作為前端工具生態(tài)系統(tǒng)的一個(gè)組成部分而存在。

關(guān)于JavaScript 構(gòu)建工具有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。