構(gòu)建工具是開發(fā)人員工作流程中不可或缺的一部分，單頁應(yīng)用程序（SPA）和現(xiàn)代JavaScript（ES6）的興起使JavaScript構(gòu)建工具激增。

術(shù)語“構(gòu)建工具”用于描述使用包、工具、庫和預(yù)設(shè)模板自動完成簡單的重復(fù)性任務(wù)的過程。

構(gòu)建工具包括各種不同的工具，例如：

•  任務(wù)執(zhí)行
•  轉(zhuǎn)換器
•  模塊打包
•  Lint
•  包管理
•  開發(fā)服務(wù)器
•  腳手架工具

這些工具可幫助開發(fā)人員高效地構(gòu)建并使開發(fā)過程更加順暢。

在本文中，我將比較在Vue.js生態(tài)系統(tǒng)中可用的用于高效構(gòu)建項(xiàng)目的搭建構(gòu)建工具，它們提供了什么，它們?nèi)绾胃倪M(jìn)開發(fā)工作流，以及如何開始使用它們。

1.先決條件

本教程假定讀者具備以下條件：

•  Node.js 10x 或者更高版本
•  安裝了Yarn或者NPM
•  JavaScript的基本知識以及框架如何工作
•  Vue.js的基礎(chǔ)知識

2.腳手架工具

腳手架工具是建立在一些構(gòu)建工具之上的抽象，最主要的是開發(fā)服務(wù)器/模塊捆綁器，它們消除了配置和使用構(gòu)建工具的麻煩。

腳手架工具可以幫助你動態(tài)地引導(dǎo)你創(chuàng)建新項(xiàng)目，你不必?fù)?dān)心配置問題。

腳手架工具還包括項(xiàng)目的配置選項(xiàng)、為未來項(xiàng)目保存配置預(yù)置的能力，以及升級使用它們構(gòu)建的項(xiàng)目依賴關(guān)系的機(jī)制。

我們將比較的Vue社區(qū)中可用于腳手架應(yīng)用程序和庫的工具是：

•  Vite
•  Vue CLI
•  Poi
•  Bili

3.什么是Vite？

Vite，最初只是作為Vue單文件組件(SFC)的開發(fā)服務(wù)器，是一個利用原生ES模塊導(dǎo)入的無捆綁JavaScript開發(fā)服務(wù)器。

create-vite-app 是一個用于引導(dǎo)新的Vite項(xiàng)目的模板，使用create-vit-app，你不必安裝Vue包，因?yàn)樗鳛槟J(rèn)的啟動器與Vue捆綁在一起，你可以安裝其他應(yīng)用的依賴。create-vite-app還支持其他框架，例如React和Preact。也可以使用 —template 標(biāo)志配置要使用的模板。

重要的是要注意，Vite仍處于試驗(yàn)階段，正在努力使其適合生產(chǎn)。最好不要在關(guān)鍵項(xiàng)目上使用它，直到它變得穩(wěn)定為止。

Vite還不向后兼容，因此它不支持Vue 2以外的任何其他Vue.js版本。

Vite包含了一個令人難以置信的快速熱模塊替換(HMR)，你的文件變化幾乎會立即反映在瀏覽器中，它也有開箱即用的支持TypeScript，.tsx 和 .jsx 文件，使用esbuild進(jìn)行移植，CSS預(yù)處理器，PostCSS和CSS模塊。

Vite的其他功能包括：

•  Asset URL處理
•  支持CSS預(yù)處理器，PostCSS和CSS模塊
•  支持模式選項(xiàng)和環(huán)境變量
•  在項(xiàng)目的 base/root 目錄下或當(dāng)前工作目錄下用 vite.config.js 或 vite.config.ts 文件擴(kuò)展默認(rèn)值
•  支持插件
•  支持自定義文件轉(zhuǎn)換

你可以在此處閱讀有關(guān)Vite的更多信息。

4.什么是Vue CLI？

Vue CLI是基于Webpack構(gòu)建的用于項(xiàng)目的官方Vue.js腳手架工具，它可以避免開發(fā)人員為項(xiàng)目配置和設(shè)置構(gòu)建過程的麻煩。它提供了一個有組織的代碼結(jié)構(gòu)，并幫助你選擇在應(yīng)用程序中需要的工具，同時它負(fù)責(zé)配置，并讓你專注于編寫為項(xiàng)目提供支持的代碼。

它還具有對Babel，TypeScript，ESLint，PostCSS和CSS預(yù)處理器，漸進(jìn)式Web應(yīng)用程序（PWA），單元測試和端到端測試的現(xiàn)成支持。它還具有基于插件的可擴(kuò)展體系結(jié)構(gòu)，該體系結(jié)構(gòu)允許開發(fā)人員構(gòu)建，共享和使用插件來解決特定問題。

你還可以在項(xiàng)目的腳手架過程中使用Vue Router添加路由，并使用Vuex添加狀態(tài)管理，并且開箱即可使用熱模塊替換（HMR）。其他一些值得注意的功能是：

•  支持模式和環(huán)境變量
•  使用 vue.config.js 或 vue.config.ts 配置文件來修改默認(rèn)的webpack配置，從而實(shí)現(xiàn)擴(kuò)展性。
•  適合喜歡使用GUI的開發(fā)人員的圖形用戶界面

5.什么是Poi？

Poi是一個建立在webpack之上的零配置捆綁程序，它的目的是通過使用預(yù)先配置的預(yù)設(shè)，使webpack的開發(fā)和捆綁應(yīng)用盡可能的簡單。Poi與框架無關(guān)，可以與任何JavaScript框架一起使用。 Poi通過減少和處理代碼來優(yōu)化性能并加快應(yīng)用程序的加載速度。

Poi更適合于構(gòu)建Web應(yīng)用程序。

Create Poi App是一種用于交互式創(chuàng)建新Poi項(xiàng)目的腳手架工具。

Poi提供了一個很好的開發(fā)體驗(yàn)，同時也提供了一個用配置文件擴(kuò)展應(yīng)用的選項(xiàng)。

它還具有一些值得注意的功能，例如：

•  對JS，CSS，文件資產(chǎn)等的現(xiàn)成支持
•  Poi與框架無關(guān)
•  無需配置即可支持JSX，Vue等
•  使用插件擴(kuò)展功能

6.什么是Bili？

Bili 在其官方文檔中被描述為一個令人愉快的庫捆綁器。

Bili是Poi的Rollup替代品，它是建立在Rollup上的零配置捆綁器，它讓開發(fā)設(shè)置變得輕而易舉，它更適合構(gòu)建庫而不是Web應(yīng)用。

Bili幫助庫作者將庫捆綁成JavaScript多種格式，例如CommonJS，UMD和ES模塊。

注意：Bili沒有CLI交互式shell。

該工具同時提供了命令行和Node.js API，所以開發(fā)者可以選擇最適合他們使用案例的方式，它是面向未來的，因?yàn)樗怯葿abel使用 babel-preset-env 和 babel-preset-typescript 移植的，所以你可以自由地使用現(xiàn)代的JavaScript功能，它的一些功能，正如其文檔中所說的那樣，包括：

•  快速，默認(rèn)為零配置
•  在“引擎蓋”下使用Rollup
•  使用Buble/Babel/TypeScript自動轉(zhuǎn)換JS文件
•  內(nèi)置對CSS、Sass、Stylus、Less和CSS模塊的支持
•  使用Rollup插件擴(kuò)展功能
•  友好的錯誤日志體驗(yàn)
•  用TypeScript編寫，自動生成的API文檔

7.安裝及使用

7.1 Vue CLI

開始使用Vue CLI工具，使用以下命令之一安裝CLI工具： 

npm install -g @vue/cli  
# OR  
yarn global add @vue/cli 

全局安裝CLI包后，我們可以在終端中訪問 vue 命令，vue create 命令可以幫助我們創(chuàng)建一個新的項(xiàng)目。

接下來，使用 vue create 命令創(chuàng)建一個新項(xiàng)目： 

vue create testing-vue-cli 

我用“testing-vue-cli”這個名字作為本教程的項(xiàng)目名，可以用任何你認(rèn)為合適的名字代替。

運(yùn)行這個命令可以給你一個交互式的腳手架體驗(yàn)，你可以選擇你的應(yīng)用需要的包，你也可以決定將配置保存為預(yù)設(shè)，以備將來的項(xiàng)目使用。

接下來，將目錄更改為你的項(xiàng)目文件夾： 

cd testing-vue-cli 

通過運(yùn)行這些命令之一來服務(wù)你的應(yīng)用程序。 

yarn serve  
# or  
npm run serve 

運(yùn)行以下命令后，你的應(yīng)用默認(rèn)應(yīng)在 http://localhost:8080上運(yùn)行：

7.2 Vite

運(yùn)行以下命令以使用模板創(chuàng)建一個新的Vite應(yīng)用程序： 

npx create-vite-app testing-vite  
# OR  
yarn create vite-app testing-vite 

現(xiàn)在，使用以下命令轉(zhuǎn)到創(chuàng)建的項(xiàng)目目錄： 

cd testing-vite 

然后繼續(xù)安裝我們的項(xiàng)目正常運(yùn)行所需的必要軟件包： 

npm install  
# OR  
yarn 

然后，你可以通過運(yùn)行以下命令在瀏覽器中啟動開發(fā)服務(wù)器： 

npm run dev  
# OR  
yarn dev 

運(yùn)行dev命令后，應(yīng)該在 http://localhost:3000上獲得與此類似的內(nèi)容：

7.3 創(chuàng)建Poi應(yīng)用程序

要開始使用Poi引導(dǎo)你的項(xiàng)目，請首先安裝創(chuàng)建Poi應(yīng)用程序CLI工具： 

yarn global add create-poi-app      
# OR  
npm i -g create-poi-app 

這個命令使 creat-poi-app 可以在全局范圍內(nèi)使用，現(xiàn)在你可以使用 cpa 命令來創(chuàng)建新項(xiàng)目。

使用以下命令創(chuàng)建一個新項(xiàng)目： 

cpa testing-poi 

運(yùn)行此命令將給你一個shell，你可以決定在你的項(xiàng)目中包含哪些工具。

接下來，使用以下命令轉(zhuǎn)到你的項(xiàng)目目錄： 

cd testing-poi 

繼續(xù)安裝Vue，還要安裝Vue模板編譯器，作為開發(fā)依賴，Vue模板編譯器把模板編譯下來變成渲染函數(shù)。 

yarn add vue && yarn add vue-template-compiler --dev 

打開位于 src 資源管理器中的 index.js 文件，并添加以下內(nèi)容： 

import Vue from 'vue'  
import App from './App.vue'  
new Vue({  
  el: "#app",  
  render: h => h( App )  
}); 

接下來，在 src 文件夾中創(chuàng)建一個 App.vue 文件，并添加以下內(nèi)容： 

<template>  
  <div id="app">  
   helloooo  
  </div>  
</template> 

現(xiàn)在，你可以通過運(yùn)行以下命令在瀏覽器中運(yùn)行開發(fā)服務(wù)器： 

yarn dev 

在運(yùn)行開發(fā)命令后，你應(yīng)該在http://localhost:4000 上得到類似這樣的運(yùn)行結(jié)果：

7.4 Bili

要使用Bili引導(dǎo)你的Vue項(xiàng)目，請首先為該項(xiàng)目創(chuàng)建一個新目錄： 

mkdir testing-bili 

將工作目錄更改為創(chuàng)建的文件夾： 

cd testing-bili 

然后使用以下命令在目錄中初始化一個新的 package.json 文件： 

npm init -y  
or using Yarn  
yarn init -y 

接下來，將Bili安裝為開發(fā)依賴項(xiàng)： 

yarn add bili --dev 

接下來，安裝Vue和Vue模板編譯器： 

yarn add vue && yarn add vue-template-compiler --dev 

通過使用以下內(nèi)容替換 package.json 中 main 的值，為你的項(xiàng)目添加一個入口文件： 

"main": "./dist/index.js", 

接下來，安裝 Rollup plugin for Vue，從而可以將單個文件組件與Bili捆綁在一起： 

yarn add rollup-plugin-vue@5.1.5 

然后配置你的npm腳本以使用Bili運(yùn)行你的項(xiàng)目，將以下內(nèi)容添加到 package.json 文件中： 

"scripts": {  
  "build": "bili App.vue --plugin.vue"  
}, 

接下來，創(chuàng)建一個 App.vue 文件并添加以下內(nèi)容： 

<template>  
  <h1>hello</h1>  
</template>  
<script>  
export default {  
  name: 'App'  
}  
</script>  
<!-- let's add some style too :) -->  
<style scoped>  
h1 {  
  color: red  
}  
</style> 

接下來，創(chuàng)建一個 bili.config.js 文件，并添加以下代碼： 

const vue = require('rollup-plugin-vue');  
module.exports = {  
  input: 'App.vue',  
  format: ['umd-min'],  
  plugins: {  
    vue: true  
  },  
  outDir: 'dist'  
} 

然后，你可以使用以下命令構(gòu)建項(xiàng)目： 

yarn build 

編譯后的文件應(yīng)位于項(xiàng)目的 dist 文件夾中。

8. 易用性和插件

Vue CLI的優(yōu)勢之一是有廣泛的插件，幾乎可以用于任何目的，這使得使用第三方插件或通過構(gòu)建自己的插件來擴(kuò)展你的項(xiàng)目功能變得很容易。

雖然四個庫的構(gòu)建都能達(dá)到幾乎相似的效果，但Vue CLI和Poi的文檔幾乎是同一標(biāo)準(zhǔn)，而Vite目前還沒有完整的文檔。Vite仍在積極開發(fā)中，人們需要閱讀該庫代碼庫中的文檔部分來執(zhí)行一些高級操作。另一方面，Bili的文檔是赤裸裸的，一個新用戶在試圖在Vue項(xiàng)目中使用它時可能會感到困惑（就像我在閱讀它時一樣），并遇到錯誤。

Vue CLI是Vue.js團(tuán)隊(duì)推薦的工具，使其成為許多開發(fā)人員的默認(rèn)選擇。

9. 社區(qū)

Vite盡管是一個相對較新的庫，但已經(jīng)積累了9.1k顆星，它被755個倉庫使用，它也有54個貢獻(xiàn)者，在NPM上的周下載量為5863。

Poi在GitHub上有5k星，在GitHub上有57個貢獻(xiàn)者，每周在NPM上有1,760的下載：

Vue CLI在NPM上擁有最高的統(tǒng)計(jì)數(shù)字，每周有24236次下載，它也被超過40萬個倉庫使用，它有370個貢獻(xiàn)者，在GitHub上獲得了25.9顆星。

Bili在GitHub上管理著878顆星星，它被1529個倉庫使用，有20個倉庫的貢獻(xiàn)者。

總結(jié)

在這篇文章中，我們看了一下在四款很棒的構(gòu)建工具中，Vue CLI在引導(dǎo)Vue項(xiàng)目中脫穎而出的一些功能，Vue CLI是很多開發(fā)者的默認(rèn)選擇，因?yàn)樗梢宰屢龑?dǎo)和管理項(xiàng)目變得輕而易舉，而且還可以通過插件輕松擴(kuò)展其功能。Vue CLI的功能也比其他任何一個腳手架項(xiàng)目的工具都多。

我們今天看到的四個腳手架工具相似，只有幾個基本區(qū)別，主要是自定義選項(xiàng)和使用它們的無縫性。

雖然Vite仍然是實(shí)驗(yàn)性的，但我們可以看到它如何反映Vue CLI的無縫性（兩者是由同一個人建立的）。