構建工具是開發人員工作流程中不可或缺的一部分，單頁應用程式（SPA）和現代JavaScript（ES6）的興起使JavaScript構建工具激增。
術語“構建工具”用於描述使用包、工具、庫和預設模板自動完成簡單的重複性任務的過程。
構建工具包括各種不同的工具，例如：
任務執行轉換器模組打包Lint包管理開發伺服器腳手架工具這些工具可幫助開發人員高效地構建並使開發過程更加順暢。
在本文中，我將比較在Vue.js生態系統中可用的用於高效構建專案的搭建構建工具，它們提供了什麼，它們如何改進開發工作流，以及如何開始使用它們。
1.先決條件本教程假定讀者具備以下條件：
Node.js 10x 或者更高版本安裝了Yarn或者NPMJavaScript的基本知識以及框架如何工作Vue.js的基礎知識2.腳手架工具腳手架工具是建立在一些構建工具之上的抽象，最主要的是開發伺服器/模組捆綁器，它們消除了配置和使用構建工具的麻煩。
腳手架工具可以幫助你動態地引導你建立新專案，你不必擔心配置問題。
腳手架工具還包括專案的配置選項、為未來專案儲存配置預置的能力，以及升級使用它們構建的專案依賴關係的機制。
我們將比較的Vue社群中可用於腳手架應用程式和庫的工具是：
ViteVue CLIPoiBili3.什麼是Vite？Vite，最初只是作為Vue單檔案元件(SFC)的開發伺服器，是一個利用原生ES模組匯入的無捆綁JavaScript開發伺服器。
create-vite-app 是一個用於引導新的Vite專案的模板，使用create-vit-app，你不必安裝Vue包，因為它作為預設的啟動器與Vue捆綁在一起，你可以安裝其他應用的依賴。create-vite-app還支援其他框架，例如React和Preact。也可以使用 —template 標誌配置要使用的模板。
重要的是要注意，Vite仍處於試驗階段，正在努力使其適合生產。最好不要在關鍵專案上使用它，直到它變得穩定為止。
Vite還不向後相容，因此它不支援Vue 2以外的任何其他Vue.js版本。
Vite包含了一個令人難以置信的快速熱模組替換(HMR)，你的檔案變化幾乎會立即反映在瀏覽器中，它也有開箱即用的支援TypeScript，.tsx 和 .jsx 檔案，使用esbuild進行移植，CSS前處理器，PostCSS和CSS模組。
Vite的其他功能包括：
Asset URL處理支援CSS前處理器，PostCSS和CSS模組支援模式選項和環境變數在專案的 base/root 目錄下或當前工作目錄下用 vite.config.js 或 vite.config.ts 檔案擴充套件預設值支援外掛支援自定義檔案轉換你可以在此處閱讀有關Vite的更多資訊。
4.什麼是Vue CLI？Vue CLI是基於Webpack構建的用於專案的官方Vue.js腳手架工具，它可以避免開發人員為專案配置和設定構建過程的麻煩。它提供了一個有組織的程式碼結構，並幫助你選擇在應用程式中需要的工具，同時它負責配置，並讓你專注於編寫為專案提供支援的程式碼。
它還具有對Babel，TypeScript，ESLint，PostCSS和CSS前處理器，漸進式Web應用程式（PWA），單元測試和端到端測試的現成支援。它還具有基於外掛的可擴充套件體系結構，該體系結構允許開發人員構建，共享和使用外掛來解決特定問題。
你還可以在專案的腳手架過程中使用Vue Router新增路由，並使用Vuex新增狀態管理，並且開箱即可使用熱模組替換（HMR）。其他一些值得注意的功能是：
Poi是一個建立在webpack之上的零配置捆綁程式，它的目的是通過使用預先配置的預設，使webpack的開發和捆綁應用盡可能的簡單。Poi與框架無關，可以與任何JavaScript框架一起使用。 Poi通過減少和處理程式碼來優化效能並加快應用程式的載入速度。
Poi更適合於構建Web應用程式。
Create Poi App是一種用於互動式建立新Poi專案的腳手架工具。
Poi提供了一個很好的開發體驗，同時也提供了一個用配置檔案擴充套件應用的選項。
它還具有一些值得注意的功能，例如：
對JS，CSS，檔案資產等的現成支援Poi與框架無關無需配置即可支援JSX，Vue等使用外掛擴充套件功能6.什麼是Bili？Bili 在其官方文件中被描述為一個令人愉快的庫捆綁器。
Bili是Poi的Rollup替代品，它是建立在Rollup上的零配置捆綁器，它讓開發設定變得輕而易舉，它更適合構建庫而不是Web應用。
Bili幫助庫作者將庫捆綁成JavaScript多種格式，例如CommonJS，UMD和ES模組。
注意：Bili沒有CLI互動式shell。
該工具同時提供了命令列和Node.js API，所以開發者可以選擇最適合他們使用案例的方式，它是面向未來的，因為它是由Babel使用 babel-preset-env 和 babel-preset-typescript 移植的，所以你可以自由地使用現代的JavaScript功能，它的一些功能，正如其文件中所說的那樣，包括：
快速，預設為零配置在“引擎蓋”下使用Rollup使用Buble/Babel/TypeScript自動轉換JS檔案內建對CSS、Sass、Stylus、Less和CSS模組的支援使用Rollup外掛擴充套件功能友好的錯誤日誌體驗用TypeScript編寫，自動生成的API文件7.安裝及使用/ 7.1 Vue CLI /
開始使用Vue CLI工具，使用以下命令之一安裝CLI工具：
npm install -g @vue/cli# ORyarn global add @vue/cli全域性安裝CLI包後，我們可以在終端中訪問 vue 命令，vue create 命令可以幫助我們建立一個新的專案。
接下來，使用 vue create 命令建立一個新專案：
vue create testing-vue-cli我用“testing-vue-cli”這個名字作為本教程的專案名，可以用任何你認為合適的名字代替。
執行這個命令可以給你一個互動式的腳手架體驗，你可以選擇你的應用需要的包，你也可以決定將配置儲存為預設，以備將來的專案使用。
接下來，將目錄更改為你的專案資料夾：
cd testing-vue-cli通過執行這些命令之一來服務你的應用程式。
yarn serve# ornpm run serve執行以下命令後，你的應用預設應在 http://localhost:8080上執行：
/ 7.2 Vite /
執行以下命令以使用模板建立一個新的Vite應用程式：
npx create-vite-app testing-vite# ORyarn create vite-app testing-vite現在，使用以下命令轉到建立的專案目錄：
cd testing-vite然後繼續安裝我們的專案正常執行所需的必要軟體包：
npm install# ORyarn然後，你可以通過執行以下命令在瀏覽器中啟動開發伺服器：
npm run dev# ORyarn dev執行dev命令後，應該在 http://localhost:3000上獲得與此類似的內容：
/ 7.3 建立Poi應用程式 /
要開始使用Poi引導你的專案，請首先安裝建立Poi應用程式CLI工具：
yarn global add create-poi-app # ORnpm i -g create-poi-app這個命令使 creat-poi-app 可以在全域性範圍內使用，現在你可以使用 cpa 命令來建立新專案。
使用以下命令建立一個新專案：
cpa testing-poi執行此命令將給你一個shell，你可以決定在你的專案中包含哪些工具。
接下來，使用以下命令轉到你的專案目錄：
cd testing-poi繼續安裝Vue，還要安裝Vue模板編譯器，作為開發依賴，Vue模板編譯器把模板編譯下來變成渲染函式。
yarn add vue && yarn add vue-template-compiler --dev開啟位於 src 資源管理器中的 index.js 檔案，並新增以下內容：
import Vue from 'vue'import App from './App.vue'new Vue({ el: "#app", render: h => h( App )});接下來，在 src 資料夾中建立一個 App.vue 檔案，並新增以下內容：
<template> <div id="app"> helloooo </div></template>現在，你可以通過執行以下命令在瀏覽器中執行開發伺服器：
在執行開發命令後，你應該在http://localhost:4000 上得到類似這樣的執行結果：
/ 7.4 Bili /
要使用Bili引導你的Vue專案，請首先為該專案建立一個新目錄：
mkdir testing-bili將工作目錄更改為建立的資料夾：
cd testing-bili然後使用以下命令在目錄中初始化一個新的 package.json 檔案：
npm init -yor using Yarnyarn init -y接下來，將Bili安裝為開發依賴項：
yarn add bili --dev接下來，安裝Vue和Vue模板編譯器：
yarn add vue && yarn add vue-template-compiler --dev通過使用以下內容替換 package.json 中 main 的值，為你的專案新增一個入口檔案：
"main": "./dist/index.js",接下來，安裝 Rollup plugin for Vue，從而可以將單個檔案元件與Bili捆綁在一起：
yarn add [email protected]然後配置你的npm指令碼以使用Bili執行你的專案，將以下內容新增到 package.json 檔案中：
"scripts": { "build": "bili App.vue --plugin.vue"},接下來，建立一個 App.vue 檔案並新增以下內容：
const vue = require('rollup-plugin-vue');module.exports = { input: 'App.vue', format: ['umd-min'], plugins: { vue: true }, outDir: 'dist'}然後，你可以使用以下命令構建專案：
yarn build編譯後的檔案應位於專案的 dist 資料夾中。
8. 易用性和外掛Vue CLI的優勢之一是有廣泛的外掛，幾乎可以用於任何目的，這使得使用第三方外掛或通過構建自己的外掛來擴充套件你的專案功能變得很容易。
雖然四個庫的構建都能達到幾乎相似的效果，但Vue CLI和Poi的文件幾乎是同一標準，而Vite目前還沒有完整的文件。Vite仍在積極開發中，人們需要閱讀該庫程式碼庫中的文件部分來執行一些高階操作。另一方面，Bili的文件是赤裸裸的，一個新使用者在試圖在Vue專案中使用它時可能會感到困惑（就像我在閱讀它時一樣），並遇到錯誤。
Vue CLI是Vue.js團隊推薦的工具，使其成為許多開發人員的預設選擇。
9. 社群Vite儘管是一個相對較新的庫，但已經積累了9.1k顆星，它被755個倉庫使用，它也有54個貢獻者，在NPM上的周下載量為5863。
Poi在GitHub上有5k星，在GitHub上有57個貢獻者，每週在NPM上有1,760的下載：
Vue CLI在NPM上擁有最高的統計數字，每週有24236次下載，它也被超過40萬個倉庫使用，它有370個貢獻者，在GitHub上獲得了25.9顆星。
Bili在GitHub上管理著878顆星星，它被1529個倉庫使用，有20個倉庫的貢獻者。
總結在這篇文章中，我們看了一下在四款很棒的構建工具中，Vue CLI在引導Vue專案中脫穎而出的一些功能，Vue CLI是很多開發者的預設選擇，因為它可以讓引導和管理專案變得輕而易舉，而且還可以通過外掛輕鬆擴充套件其功能。Vue CLI的功能也比其他任何一個腳手架專案的工具都多。
我們今天看到的四個腳手架工具相似，只有幾個基本區別，主要是自定義選項和使用它們的無縫性。
雖然Vite仍然是實驗性的，但我們可以看到它如何反映Vue CLI的無縫性（兩者是由同一個人建立的）。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆：大禮包，送某網精品視訊課程網盤資料，準能為你節省不少錢！