構建工具是開(kāi)發(fā)人員工作流程中不可或缺的一部分，單頁(yè)應用程序（SPA）和現代JavaScript（ES6）的興起使JavaScript構建工具激增。
術(shù)語(yǔ)“構建工具”用于描述使用包、工具、庫和預設模板自動(dòng)完成簡(jiǎn)單的重復性任務(wù)的過(guò)程。
構建工具包括各種不同的工具，例如：
這些工具可幫助開(kāi)發(fā)人員高效地構建并使開(kāi)發(fā)過(guò)程更加順暢。
在本文中，我將比較在Vue.js生態(tài)系統中可用的用于高效構建項目的搭建構建工具，它們提供了什么，它們如何改進(jìn)開(kāi)發(fā)工作流，以及如何開(kāi)始使用它們。
本教程假定讀者具備以下條件：
腳手架工具是建立在一些構建工具之上的抽象，最主要的是開(kāi)發(fā)服務(wù)器/模塊捆綁器，它們消除了配置和使用構建工具的麻煩。
腳手架工具可以幫助你動(dòng)態(tài)地引導你創(chuàng )建新項目，你不必擔心配置問(wèn)題。
腳手架工具還包括項目的配置選項、為未來(lái)項目保存配置預置的能力，以及升級使用它們構建的項目依賴(lài)關(guān)系的機制。
我們將比較的Vue社區中可用于腳手架應用程序和庫的工具是：
Vite，最初只是作為Vue單文件組件(SFC)的開(kāi)發(fā)服務(wù)器，是一個(gè)利用原生ES模塊導入的無(wú)捆綁JavaScript開(kāi)發(fā)服務(wù)器。
create-vite-app 是一個(gè)用于引導新的Vite項目的模板，使用create-vit-app，你不必安裝Vue包，因為它作為默認的啟動(dòng)器與Vue捆綁在一起，你可以安裝其他應用的依賴(lài)。create-vite-app還支持其他框架，例如React和Preact。也可以使用 —template 標志配置要使用的模板。
重要的是要注意，Vite仍處于試驗階段，正在努力使其適合生產(chǎn)。最好不要在關(guān)鍵項目上使用它，直到它變得穩定為止。
Vite還不向后兼容，因此它不支持Vue 2以外的任何其他Vue.js版本。
Vite包含了一個(gè)令人難以置信的快速熱模塊替換(HMR)，你的文件變化幾乎會(huì )立即反映在瀏覽器中，它也有開(kāi)箱即用的支持TypeScript，.tsx 和 .jsx 文件，使用esbuild進(jìn)行移植，CSS預處理器，PostCSS和CSS模塊。
Vite的其他功能包括：
你可以在此處閱讀有關(guān)Vite的更多信息。
Vue CLI是基于Webpack構建的用于項目的官方Vue.js腳手架工具，它可以避免開(kāi)發(fā)人員為項目配置和設置構建過(guò)程的麻煩。它提供了一個(gè)有組織的代碼結構，并幫助你選擇在應用程序中需要的工具，同時(shí)它負責配置，并讓你專(zhuān)注于編寫(xiě)為項目提供支持的代碼。
它還具有對Babel，TypeScript，ESLint，PostCSS和CSS預處理器，漸進(jìn)式Web應用程序（PWA），單元測試和端到端測試的現成支持。它還具有基于插件的可擴展體系結構，該體系結構允許開(kāi)發(fā)人員構建，共享和使用插件來(lái)解決特定問(wèn)題。
你還可以在項目的腳手架過(guò)程中使用Vue Router添加路由，并使用Vuex添加狀態(tài)管理，并且開(kāi)箱即可使用熱模塊替換（HMR）。其他一些值得注意的功能是：
https://poi.js.org/
Poi是一個(gè)建立在webpack之上的零配置捆綁程序，它的目的是通過(guò)使用預先配置的預設，使webpack的開(kāi)發(fā)和捆綁應用盡可能的簡(jiǎn)單。Poi與框架無(wú)關(guān)，可以與任何JavaScript框架一起使用。 Poi通過(guò)減少和處理代碼來(lái)優(yōu)化性能并加快應用程序的加載速度。
Poi更適合于構建Web應用程序。
Create Poi App是一種用于交互式創(chuàng )建新Poi項目的腳手架工具。
Poi提供了一個(gè)很好的開(kāi)發(fā)體驗，同時(shí)也提供了一個(gè)用配置文件擴展應用的選項。
它還具有一些值得注意的功能，例如：
Bili 在其官方文檔中被描述為一個(gè)令人愉快的庫捆綁器。
Bili是Poi的Rollup替代品，它是建立在Rollup上的零配置捆綁器，它讓開(kāi)發(fā)設置變得輕而易舉，它更適合構建庫而不是Web應用。
Bili幫助庫作者將庫捆綁成JavaScript多種格式，例如CommonJS，UMD和ES模塊。
注意：Bili沒(méi)有CLI交互式shell。
該工具同時(shí)提供了命令行和Node.js API，所以開(kāi)發(fā)者可以選擇最適合他們使用案例的方式，它是面向未來(lái)的，因為它是由Babel使用 babel-preset-env 和 babel-preset-typescript 移植的，所以你可以自由地使用現代的JavaScript功能，它的一些功能，正如其文檔中所說(shuō)的那樣，包括：
/ 7.1 Vue CLI /
開(kāi)始使用Vue CLI工具，使用以下命令之一安裝CLI工具：
npm install -g @vue/cli
# OR
yarn global add @vue/cli全局安裝CLI包后，我們可以在終端中訪(fǎng)問(wèn) vue 命令，vue create 命令可以幫助我們創(chuàng )建一個(gè)新的項目。
接下來(lái)，使用 vue create 命令創(chuàng )建一個(gè)新項目：
vue create testing-vue-cli我用“testing-vue-cli”這個(gè)名字作為本教程的項目名，可以用任何你認為合適的名字代替。
運行這個(gè)命令可以給你一個(gè)交互式的腳手架體驗，你可以選擇你的應用需要的包，你也可以決定將配置保存為預設，以備將來(lái)的項目使用。
接下來(lái)，將目錄更改為你的項目文件夾：
cd testing-vue-cli通過(guò)運行這些命令之一來(lái)服務(wù)你的應用程序。
yarn serve
# or
npm run serve運行以下命令后，你的應用默認應在 http://localhost:8080上運行：
/ 7.2 Vite /
運行以下命令以使用模板創(chuàng )建一個(gè)新的Vite應用程序：
npx create-vite-app testing-vite
# OR
yarn create vite-app testing-vite現在，使用以下命令轉到創(chuàng )建的項目目錄：
cd testing-vite然后繼續安裝我們的項目正常運行所需的必要軟件包：
npm install
# OR
yarn然后，你可以通過(guò)運行以下命令在瀏覽器中啟動(dòng)開(kāi)發(fā)服務(wù)器：
npm run dev
# OR
yarn dev運行dev命令后，應該在 http://localhost:3000上獲得與此類(lèi)似的內容：
/ 7.3 創(chuàng )建Poi應用程序 /
要開(kāi)始使用Poi引導你的項目，請首先安裝創(chuàng )建Poi應用程序CLI工具：
yarn global add create-poi-app
# OR
npm i -g create-poi-app這個(gè)命令使 creat-poi-app 可以在全局范圍內使用，現在你可以使用 cpa 命令來(lái)創(chuàng )建新項目。
使用以下命令創(chuàng )建一個(gè)新項目：
cpa testing-poi運行此命令將給你一個(gè)shell，你可以決定在你的項目中包含哪些工具。
接下來(lái)，使用以下命令轉到你的項目目錄：
cd testing-poi繼續安裝Vue，還要安裝Vue模板編譯器，作為開(kāi)發(fā)依賴(lài)，Vue模板編譯器把模板編譯下來(lái)變成渲染函數。
yarn add vue && yarn add vue-template-compiler --dev打開(kāi)位于 src 資源管理器中的 index.js 文件，并添加以下內容：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: "#app",
render: h => h( App )
});接下來(lái)，在 src 文件夾中創(chuàng )建一個(gè) App.vue 文件，并添加以下內容：
<template>
<div id="app">
helloooo
</div>
</template>現在，你可以通過(guò)運行以下命令在瀏覽器中運行開(kāi)發(fā)服務(wù)器：
yarn dev在運行開(kāi)發(fā)命令后，你應該在http://localhost:4000 上得到類(lèi)似這樣的運行結果：
/ 7.4 Bili /
要使用Bili引導你的Vue項目，請首先為該項目創(chuàng )建一個(gè)新目錄：
mkdir testing-bili將工作目錄更改為創(chuàng )建的文件夾：
cd testing-bili然后使用以下命令在目錄中初始化一個(gè)新的 package.json 文件：
npm init -y
or using Yarn
yarn init -y接下來(lái)，將Bili安裝為開(kāi)發(fā)依賴(lài)項：
yarn add bili --dev接下來(lái)，安裝Vue和Vue模板編譯器：
yarn add vue && yarn add vue-template-compiler --dev通過(guò)使用以下內容替換 package.json 中 main 的值，為你的項目添加一個(gè)入口文件：
"main": "./dist/index.js",接下來(lái)，安裝 Rollup plugin for Vue，從而可以將單個(gè)文件組件與Bili捆綁在一起：
yarn add rollup-plugin-vue@5.1.5然后配置你的npm腳本以使用Bili運行你的項目，將以下內容添加到 package.json 文件中：
"scripts": {
"build": "bili App.vue --plugin.vue"
},接下來(lái)，創(chuàng )建一個(gè) App.vue 文件并添加以下內容：
<template>
<h1>hello</h1>
</template>
<script>
export default {
name: 'App'
}
</script>
<!-- let's add some style too :) -->
<style scoped>
h1 {
color: red
}
</style>接下來(lái)，創(chuàng )建一個(gè) bili.config.js 文件，并添加以下代碼：
const vue = require('rollup-plugin-vue');
module.exports = {
input: 'App.vue',
format: ['umd-min'],
plugins: {
vue: true
},
outDir: 'dist'
}然后，你可以使用以下命令構建項目：
yarn build編譯后的文件應位于項目的 dist 文件夾中。
Vue CLI的優(yōu)勢之一是有廣泛的插件，幾乎可以用于任何目的，這使得使用第三方插件或通過(guò)構建自己的插件來(lái)擴展你的項目功能變得很容易。
雖然四個(gè)庫的構建都能達到幾乎相似的效果，但Vue CLI和Poi的文檔幾乎是同一標準，而Vite目前還沒(méi)有完整的文檔。Vite仍在積極開(kāi)發(fā)中，人們需要閱讀該庫代碼庫中的文檔部分來(lái)執行一些高級操作。另一方面，Bili的文檔是赤裸裸的，一個(gè)新用戶(hù)在試圖在Vue項目中使用它時(shí)可能會(huì )感到困惑（就像我在閱讀它時(shí)一樣），并遇到錯誤。
Vue CLI是Vue.js團隊推薦的工具，使其成為許多開(kāi)發(fā)人員的默認選擇。
Vite盡管是一個(gè)相對較新的庫，但已經(jīng)積累了9.1k顆星，它被755個(gè)倉庫使用，它也有54個(gè)貢獻者，在NPM上的周下載量為5863。
Poi在GitHub上有5k星，在GitHub上有57個(gè)貢獻者，每周在NPM上有1,760的下載：
Vue CLI在NPM上擁有最高的統計數字，每周有24236次下載，它也被超過(guò)40萬(wàn)個(gè)倉庫使用，它有370個(gè)貢獻者，在GitHub上獲得了25.9顆星。
Bili在GitHub上管理著(zhù)878顆星星，它被1529個(gè)倉庫使用，有20個(gè)倉庫的貢獻者。
在這篇文章中，我們看了一下在四款很棒的構建工具中，Vue CLI在引導Vue項目中脫穎而出的一些功能，Vue CLI是很多開(kāi)發(fā)者的默認選擇，因為它可以讓引導和管理項目變得輕而易舉，而且還可以通過(guò)插件輕松擴展其功能。Vue CLI的功能也比其他任何一個(gè)腳手架項目的工具都多。
我們今天看到的四個(gè)腳手架工具相似，只有幾個(gè)基本區別，主要是自定義選項和使用它們的無(wú)縫性。
雖然Vite仍然是實(shí)驗性的，但我們可以看到它如何反映Vue CLI的無(wú)縫性（兩者是由同一個(gè)人建立的）。
你更喜歡哪一個(gè)？為什么？在評論部分讓我知道你的想法，或者你想讓我進(jìn)行其他比較。
聯(lián)系客服
