Vue.js構建工具比較

構建工具是開發人員工作流程中不可或缺的一部分，單頁應用程式（SPA）和現代JavaScript（ES6）的興起使JavaScript構建工具激增。

術語“構建工具”用於描述使用包、工具、庫和預設模板自動完成簡單的重複性任務的過程。

構建工具包括各種不同的工具，例如：

任務執行
轉換器
模組打包
Lint
包管理
開發伺服器
腳手架工具

這些工具可幫助開發人員高效地構建並使開發過程更加順暢。

在本文中，我將比較在Vue.js生態系統中可用的用於高效構建專案的搭建構建工具，它們提供了什麼，它們如何改進開發工作流，以及如何開始使用它們。

1.先決條件

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

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

2.腳手架工具

腳手架工具是建立在一些構建工具之上的抽象，最主要的是開發伺服器/模組捆綁器，它們消除了配置和使用構建工具的麻煩。

腳手架工具可以幫助你動態地引導你建立新專案，你不必擔心配置問題。

腳手架工具還包括專案的配置選項、為未來專案儲存配置預置的能力，以及升級使用它們構建的專案依賴關係的機制。

我們將比較的Vue社群中可用於腳手架應用程式和庫的工具是：

3.什麼是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）。其他一些值得注意的功能是：

支援模式和環境變數
使用 vue.config.js 或 vue.config.ts 配置檔案來修改預設的webpack配置，從而實現擴充套件性。
適合喜歡使用GUI的開發人員的圖形使用者介面

5.什麼是Poi？

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
# OR
yarn global add @vue/cli

全域性安裝CLI包後，我們可以在終端中訪問 vue 命令，vue create 命令可以幫助我們建立一個新的專案。

接下來，使用 vue create 命令建立一個新專案：

vue create testing-vue-cli

我用“testing-vue-cli”這個名字作為本教程的專案名，可以用任何你認為合適的名字代替。

執行這個命令可以給你一個互動式的腳手架體驗，你可以選擇你的應用需要的包，你也可以決定將配置儲存為預設，以備將來的專案使用。

接下來，將目錄更改為你的專案資料夾：

cd testing-vue-cli

通過執行這些命令之一來服務你的應用程式。

yarn serve
# or
npm run serve

執行以下命令後，你的應用預設應在 http://localhost:8080上執行：

7.2 Vite

執行以下命令以使用模板建立一個新的Vite應用程式：

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

現在，使用以下命令轉到建立的專案目錄：

cd testing-vite

然後繼續安裝我們的專案正常執行所需的必要軟體包：

npm install
# OR
yarn

然後，你可以通過執行以下命令在瀏覽器中啟動開發伺服器：

npm run dev
# OR
yarn dev

執行dev命令後，應該在 http://localhost:3000上獲得與此類似的內容：

7.3 建立Poi應用程式

要開始使用Poi引導你的專案，請首先安裝建立Poi應用程式CLI工具：

yarn global add create-poi-app    
# OR
npm 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>

現在，你可以通過執行以下命令在瀏覽器中執行開發伺服器：

yarn dev

在執行開發命令後，你應該在http://localhost:4000 上得到類似這樣的執行結果：

7.4 Bili

要使用Bili引導你的Vue專案，請首先為該專案建立一個新目錄：

mkdir testing-bili

將工作目錄更改為建立的資料夾：

cd testing-bili

然後使用以下命令在目錄中初始化一個新的 package.json 檔案：

npm init -y
or using Yarn
yarn 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 rollup-plugin-vue@5.1.5

然後配置你的npm指令碼以使用Bili執行你的專案，將以下內容新增到 package.json 檔案中：

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

接下來，建立一個 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>

接下來，建立一個 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 資料夾中。

8. 易用性和外掛

Vue CLI的優勢之一是有廣泛的外掛，幾乎可以用於任何目的，這使得使用第三方外掛或通過構建自己的外掛來擴充套件你的專案功能變得很容易。

雖然四個庫的構建都能達到幾乎相似的效果，但Vue CLI和Poi的文件幾乎是同一標準，而Vite目前還沒有完整的文件。Vite仍在積極開發中，人們需要閱讀該庫程式碼庫中的文件部分來執行一些高階操作。另一方面，Bili的文件是赤裸裸的，一個新使用者在試圖在Vue專案中使用它時可能會感到困惑（就像我在閱讀它時一樣），並遇到錯誤。

Vue CLI是Vue.js團隊推薦的工具，使其成為許多開發人員的預設選擇。