【Parcel 2 + Vue 3】從0到1搭建一款極快，零配置的Vue3項(xiàng)目構(gòu)建工具

前言

一周時(shí)間，沒見了，大家有沒有想我??！哈哈！我知道肯定會(huì)有的。言歸正傳，我們切入正題。上一篇文章中我主要介紹了使用Vite2+Vue3+Ts如何更快的入手項(xiàng)目。那么，今天我將會(huì)帶領(lǐng)大家認(rèn)識(shí)一個(gè)新的Vue3項(xiàng)目構(gòu)建工具——parcel-vue-cli。這是什么？怎么以前沒有聽說過。有這樣的疑問其實(shí)并不奇怪，因?yàn)檫@個(gè)構(gòu)建工具是我自己開發(fā)的。你可能會(huì)這樣問：“你自己開發(fā)的？這么厲害嗎”？是的，豆哥其實(shí)就這么厲害。開玩笑啦！其實(shí)沒有你想得那么厲害。都是搬磚人，主要看思路。好，不扯了！本篇文章我將帶大家如何從0到1開發(fā)一款極快，零配置的Vue3項(xiàng)目構(gòu)建工具（parcel-vue-cli）。名字就這么記著吧！
實(shí)戰(zhàn)

既然，從0開始，那么我們肯定需要先了解parcel 2是什么東東？
一、介紹Parcel 2

了解Parcel 2之前呢，你得知道它上一個(gè)版本Parcel 1是啥。這是官方網(wǎng)址：https://parceljs.org/
官方是這樣介紹它的：

    Blazing fast, zero configuration web application bundler

    極速、零配置的web應(yīng)用捆綁包。
    我們這里就簡(jiǎn)單地介紹下它的幾個(gè)特性。

    Parcel使用工作進(jìn)程來啟用多核編譯，并且有一個(gè)文件系統(tǒng)緩存，即使在重新啟動(dòng)后也可以快速重建。
    Parcel提供了對(duì)JS、CSS、HTML、文件資產(chǎn)等的現(xiàn)成支持—不需要插件。
    當(dāng)需要時(shí)，代碼會(huì)使用Babel、postss和posthml自動(dòng)轉(zhuǎn)換，甚至是node_modules。
    使用動(dòng)態(tài)import()語法，Parcel拆分輸出包，以便只在初始加載時(shí)加載所需的內(nèi)容。
    在開發(fā)過程中進(jìn)行更改時(shí)，Parcel會(huì)自動(dòng)更新瀏覽器中的模塊，無需配置。
    Parcel在遇到錯(cuò)誤時(shí)打印語法高亮顯示的代碼幀，以幫助您確定問題。

看完這些特性之后，是不是感覺跟Vite很相似。https://parceljs.org/getting_started.html這是文檔地址，如果還有小伙伴沒有接觸Parcel的，那么推薦你趕快試試去。今天，我們就不過多地介紹Parcel 1了，主要是為了拋磚引玉，為了咱的主角Parcel 2。Parcel 1都這么強(qiáng)大了，那么Parcel 2不就更厲害了嗎？別急！聽我細(xì)細(xì)道來。

如果你在找Parcel 2的官網(wǎng)怎么也沒找到，那就對(duì)了。https://github.com/parcel-bundler/parcel/tree/v2，你可以打開Parcel 2的github網(wǎng)址。我們滑到Features一欄，你會(huì)發(fā)現(xiàn)介紹的跟Parcel 1一樣，我去~ 還能再懶點(diǎn)嗎？整出來一個(gè)2，特性介紹還跟1一模一樣。莫著急，我們往下看會(huì)看到一段文字：

    Below is the design document that was created before work on the implementation of Parcel 2 started and some sections are outdated. The actual (somewhat complete) documentation for Parcel 2 is available here: https://v2.parceljs.org/.

    以下是在開始實(shí)施Parcel 2的工作之前創(chuàng)建的設(shè)計(jì)文檔，并且某些部分已經(jīng)過時(shí)。 此處提供了包裹2的實(shí)際（有些完整）文檔：https://v2.parceljs.org/.

踏破特寫無覓處，得來全不費(fèi)工夫。原來官網(wǎng)在這里，我們毫不留情地打開了它。



    Parcel是所有代碼的編譯器，無論使用哪種語言或工具鏈。Parcel會(huì)獲取您的所有文件和依賴項(xiàng)，進(jìn)行轉(zhuǎn)換，然后將它們合并到較小的一組輸出文件中，這些文件可用于運(yùn)行代碼。Parcel開箱即用地支持多種不同的語言和文件類型，從HTML，CSS和JavaScript等網(wǎng)絡(luò)技術(shù)到Rust等低級(jí)語言，以及任何可編譯為WebAssembly（WASM）的東西，再到圖像，字體，視頻，和更多。包裹使您的代碼可移植。您可以為不同的環(huán)境，服務(wù)器的Web或應(yīng)用程序構(gòu)建代碼。您甚至可以一次建立多個(gè)目標(biāo)，并在進(jìn)行更改時(shí)實(shí)時(shí)更新它們。包裹快速且可預(yù)測(cè)。它在worker內(nèi)部并行隔離地編譯所有文件，并在運(yùn)行時(shí)將所有文件緩存。緩存在計(jì)算機(jī)之間是穩(wěn)定的，并且僅受項(xiàng)目中文件和配置的影響（除非您要傳遞特定的環(huán)境變量）。

這是官方對(duì)Parcel的解釋，總之一點(diǎn)，記住它是一個(gè)web應(yīng)用捆綁包就可以了。我們先不看側(cè)邊欄菜單那些內(nèi)容，先看看Parcel 2到底更新了啥？肯定不只是那些特性。我們打開頂部Blog欄，也就是這個(gè)網(wǎng)址https://v2.parceljs.org/blog/alpha1/，
也就是Parcel 2.0.0-alpha.1 。我們會(huì)看到下方這樣介紹。



    Today I’m incredibly excited to release the first alpha version of Parcel 2! Please try it out and help us take Parcel 2 to the finish line. Check it out on Github!

    今天，我非常高興地發(fā)布Parcel 2的第一個(gè)Alpha版本！ 請(qǐng)嘗試一下，幫助我們將包裹2送到終點(diǎn)線。 在Github上查看！

看了看日子，是2019年-09-13年推出的，這日子到現(xiàn)在一年多了。看看到底更新了啥？

    Parcel 2是對(duì)Parcel的徹底改寫，我們已經(jīng)進(jìn)行了一年多的研究，在此之前進(jìn)行了將近一年的設(shè)計(jì)。 它融合了我們從一開始就學(xué)習(xí)構(gòu)建Parcel所學(xué)到的一切，其結(jié)果比Parcel 1更具擴(kuò)展性，可擴(kuò)展性和可靠性，同時(shí)保留了您對(duì)Parcel期望的易用性和開發(fā)人員經(jīng)驗(yàn)。

看到這樣的解釋，是不是很迫不及待了。不要著急，我們?cè)偻驴础?br>
    Parcel 2從頭到尾都是完全可擴(kuò)展的。插件類型已經(jīng)擴(kuò)展，可以通過易于配置的管道擴(kuò)展和覆蓋幾乎所有核心行為。盡管默認(rèn)設(shè)置包括包裹1（及更多）中的所有內(nèi)容，但現(xiàn)在您可以根據(jù)需要自定義和擴(kuò)展幾乎所有內(nèi)容。
    Parcel一直利用并行性和緩存來擴(kuò)展到大型應(yīng)用程序，而在Parcel 2中更是如此。我們現(xiàn)在可以緩存和并行化Parcel的更多工作，因此您可以期望更快的構(gòu)建，尤其是緩存的構(gòu)建。我們還保留了更少的內(nèi)存，因此Parcel 2可以擴(kuò)展到更大的應(yīng)用程序。
    Parcel 2提高了緩存的可靠性，同時(shí)將性能最大化。我們利用全新的跨平臺(tái)文件系統(tǒng)監(jiān)視程序，即使Parcel未運(yùn)行，該監(jiān)視程序也可以檢測(cè)粒度文件的更改。同時(shí)，我們的資產(chǎn)圖可以超精細(xì)地失效，這意味著緩存的構(gòu)建幾乎具有與監(jiān)視模式完全相同的性能！

Parcel 2是可配置的。 Parcel 2 CLI內(nèi)置的默認(rèn)配置足以滿足大多數(shù)應(yīng)用程序的需求，并包括Parcel 1支持的所有功能以及更多功能，但是Parcel 2支持通過專門為每個(gè)Parcel核心設(shè)計(jì)的一整套插件類型，通過其他功能擴(kuò)展核心階段。

下面還有很多特性解釋，我這里因?yàn)槠脑?，就不過多解釋了。其實(shí)我看來，最具特色的更新是Transformers。Transformers將代碼和其他資產(chǎn)從一種語言編譯成另一種語言，或者只是以某種方式轉(zhuǎn)換文件。 例如，TypeScript轉(zhuǎn)換器將TypeScript編譯為JavaScript，而Babel轉(zhuǎn)換器將JavaScript轉(zhuǎn)換為其他JavaScript。 轉(zhuǎn)換程序還負(fù)責(zé)從代碼中提取依賴項(xiàng)，例如import語句和要求調(diào)用，這些依賴關(guān)系將傳遞回解析器，另一個(gè)轉(zhuǎn)換程序，依此類推，直到為應(yīng)用程序構(gòu)建完整的資產(chǎn)圖。另外，為什么重點(diǎn)說Transformers呢？是因?yàn)楸酒恼率褂昧薂parcel/transformer-vue，在這里解釋Transformers有助于下面理解。

看完了第一個(gè)Alpha版本！我們來看第一個(gè)Beta版。



    Improved tree shaking （改進(jìn)的樹狀搖動(dòng)）
    Faster source map generation （source更快的源地圖生成）
    Improved content hashing （改進(jìn)的內(nèi)容散列）
    Resolver diagnostics （解析器診斷）
    More accurate bundle reports （更準(zhǔn)確的捆綁包報(bào)告）
    Tons of bugfixes and improvements （大量的錯(cuò)誤修正和改進(jìn)）

這是Parcel 2的第一個(gè)beta版本。這意味著它比每晚或alpha版本更穩(wěn)定，但是在完全穩(wěn)定的版本發(fā)布之前，仍需要進(jìn)行一些更改。 特別是，beta表示我們不打算更改大多數(shù)面向用戶的API。例如配置格式（在package.json和.parcelrc中）和CLI參數(shù)。
二、入門Parcel 2

我們從這里開始https://v2.parceljs.org/getting-started/webapp/，從如何安裝Parcel 2。

yarn add -D parcel@next



OR

npm install -D parcel@next



我們可以這樣使用它，當(dāng)然這里是以React.js項(xiàng)目為例，你還可以安裝其他語言。

package.json

{
  "name": "my-project",
  "scripts": {
    "start": "parcel serve index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "parcel": "next"
  }
}

 

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Parcel Project</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>


index.js

import React from "react";
import { render } from "react-dom";

render(<h1>Hello World</h1>, document.getElementById("root"));

 

在上面的示例中，您可以看到兩個(gè)命令，開發(fā)命令parcel serve index.html和parcel build index.html用于創(chuàng)建生產(chǎn)版本。

示例中的命令以index.html作為入口點(diǎn)，而不是JavaScript文件作為入口點(diǎn)，這與其他捆綁程序不同。 使用HTML文件作為入口點(diǎn)使Parcel易于使用，因?yàn)樗梢灾苯訌腍TML文件中檢測(cè)依賴關(guān)系，并將所有檢測(cè)到的依賴關(guān)系自動(dòng)捆綁到各自的捆綁包中，而無需進(jìn)行任何配置。 Parcel甚至可以自動(dòng)執(zhí)行更高級(jí)的功能，例如差異服務(wù)和編譯內(nèi)聯(lián)腳本和樣式，而無需任何配置。

這里是不是跟Vite很相似呢！




三、使用Parcel 2搭建一個(gè)Vue3項(xiàng)目

既然覺得跟Vite這么相似，那么我們要不也搭建一個(gè)項(xiàng)目構(gòu)建工具？首先，我們來到了這里https://v2.parceljs.org/languages/vue/。驚奇的發(fā)現(xiàn)這樣一段話：

    Note that Parcel does not support using SFCs with Vue 2, you must use Vue 3 beta or later.

    請(qǐng)注意，Parcel不支持在Vue 2中使用SFC，必須使用Vue 3 beta或更高版本。

既然都這么說了，我們就用Vue 3。官網(wǎng)說，Parcel支持Vue，而無需任何其他配置。頓時(shí)愛了！



話不多說，我們開始開發(fā)。

我們參照VueCLI的項(xiàng)目目錄開始創(chuàng)建文件以及文件夾。（我會(huì)在文末放出源碼地址，我這里先給出大概的文件目錄）

































我們來直接看package.json文件。

{
  "name": "parcel-vue-app",
  "version": "1.0.3",
  "description": "Blazing fast, zero configuration vue application bundler.",
  "keywords": [
    "parcel",
    "vue"
  ],
  "private": false,
  "author": {
    "name": "maomincoding",
    "email": "17864296568@163.com",
    "url": "https://www.maomin.club"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/maomincoding/parcel-vue-app.git"
  },
  "license": "MIT",
  "engines": {
    "node": ">=14"
  },
  "source": "src/main.js",
  "targets": {
    "index": {
      "includeNodeModules": {
        "axios": true,
        "vue": true,
        "vue-router": true,
        "vuex": true,
        "mockjs": false
      },
      "context": "browser",
      "distDir": "./buildDir",
      "outputFormat": "esmodule",
      "scopeHoist": false,
      "optimize": true,
      "publicUrl": "/"
    }
  },
  "scripts": {
    "serve": "parcel ./public/index.html --port 3000 --no-source-maps",
    "build": "parcel build ./public/index.html --no-source-maps"
  },
  "devDependencies": {
    "@parcel/transformer-image": "2.0.0-beta.2",
    "@parcel/transformer-sass": "2.0.0-beta.2",
    "@parcel/transformer-vue": "2.0.0-beta.2",
    "@vue/compiler-sfc": "^3.0.9",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.23.0",
    "eslint-plugin-vue": "^7.8.0",
    "mockjs": "^1.1.0",
    "parcel": "^2.0.0-beta.2",
    "sass": "^1.32.8"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "vue": "^3.0.9",
    "vue-router": "4",
    "vuex": "^4.0.0"
  }
}

   

為什么我這里會(huì)給出package.json文件呢？第一點(diǎn)呢？主要是讓大家看下我安裝的依賴就知道我要干什么了第二點(diǎn)呢？也是最重要的一點(diǎn)。我們知道像Webpack、VueCLI、Vite這些工具都有自己的配置文件，那么Parcel 2在哪配置呢？啥？不是說Parcel 2是零配置嗎？我可不想背鍋??！官方這樣解釋：

    Parcel famously requires zero configuration. This never meant non-configurable, just that Parcel attempted to infer as much as possible from the code itself, and used existing config files for other tools (e.g. .babelrc). Users have loved the ease of use and developer experience that this has provided, but there are always edge cases and real use cases that require a bit more customizability.

    Parcel著名地要求零配置。 這絕不是意味著不可配置，只是Parcel試圖從代碼本身中推斷出盡可能多的信息，并將現(xiàn)有的配置文件用于其他工具（例如.babelrc）。 用戶喜歡它提供的易用性和開發(fā)人員體驗(yàn)，但是總是有一些邊際情況和實(shí)際用例需要更多的可定制性。

也就是說定制化配置你可以在package.json文件中配置。其他詳情配置參數(shù)你可以查看這里https://v2.parceljs.org/configuration/package-json/。

首先，我們來解讀下上面的package.json文件。我們的目的是為了搭建像Vite這樣的項(xiàng)目構(gòu)建工具。那么，既然是Vue3項(xiàng)目，肯定少不了vue-router、vuex、vue。接口請(qǐng)求工具我們使用axios。css預(yù)處理語言我們使用scss。模擬數(shù)據(jù)我們肯定使用mockjs。代碼檢測(cè)工具eslint這個(gè)大家肯定很熟悉了。@vue/compiler-sfc該軟件包包含較低級(jí)別的實(shí)用程序，如果您正在為將Vue單個(gè)文件組件（SFC）編譯為JavaScript的捆綁器或模塊系統(tǒng)編寫插件/轉(zhuǎn)換，則可以使用這些實(shí)用程序。注意，這里需要與Vue版本一致。剩下的兩個(gè)依賴@parcel/transformer-vue、@parcel/transformer-sass。則會(huì)在啟動(dòng)項(xiàng)目時(shí)自動(dòng)安裝，不需要你的手動(dòng)安裝。我最后講一下@parcel/transformer-image這個(gè)依賴，一句話，當(dāng)時(shí)被它坑慘了。
我下面總結(jié)了一下，你需要仔細(xì)看下面的內(nèi)容，要不然跟我一樣。熬夜熬到兩點(diǎn)鐘，也解決不了問題。

當(dāng)我安裝完上面依賴時(shí)，那時(shí)還沒安裝@parcel/transformer-image依賴（因?yàn)闆]仔細(xì)看文檔）。我非常高興地啟動(dòng)項(xiàng)目，結(jié)果發(fā)現(xiàn)img標(biāo)簽引入圖片顯示不出來。我就疑問了，我又采用了require()也不好使。最重要的是一頓報(bào)錯(cuò)。于是，又回頭看了下文檔。我看到這里https://v2.parceljs.org/recipes/image/，我心里覺得原來沒有安裝它啊，于是我手動(dòng)的安裝了@parcel/transformer-image。但是，一直在安裝sharp這地方卡著。我又看了下文檔。

    要進(jìn)行這些圖像轉(zhuǎn)換，我們依賴于圖像轉(zhuǎn)換庫Sharp，因此我們要求您使用npm install sharp -D或yarn add sharp -D在本地安裝它。

好吧，我終止了下載，我就不信了。單獨(dú)安裝下sharp還不行嗎？果然，出錯(cuò)出在這。我通過查看sharp的官方文檔，總結(jié)了一下解決措施。

    獲取文件

打開網(wǎng)址：

https://github.com/lovell/sharp-libvips/



查找與您的計(jì)算機(jī)環(huán)境匹配的兩個(gè)文件。它們是以下兩個(gè)文件，xxx代表計(jì)算機(jī)環(huán)境。

libvips-8.9.0-xxx.tar.gz
libvips-8.10.5-xxx.tar.br


在Mac OS環(huán)境中為darwin-x64。在Windows環(huán)境中為win32-x64。

    查找文件夾
    鍵入以下命令以獲取NPM緩存路徑。

npm config get cache

 




獲取路徑后，在該路徑下找到_libvips該文件夾，將上述兩個(gè)文件放入該文件夾中并重新啟動(dòng)安裝命令。

這樣，你直接安裝@parcel/transformer-image即可，因?yàn)榘惭b它的時(shí)候自動(dòng)安裝上了sharp。

安裝依賴的問題現(xiàn)在已經(jīng)解決完了，下面，我們簡(jiǎn)單地講一下Parcel 2配置。我摘要出package.json文件中Parcel 2配置如下。

{
 "source": "src/main.js",
  "targets": {
    "index": {
      "includeNodeModules": {
        "axios": true,
        "vue": true,
        "vue-router": true,
        "vuex": true,
        "mockjs": false
      },
      "context": "browser",
      "distDir": "./buildDir",
      "outputFormat": "esmodule",
      "scopeHoist": false,
      "optimize": true,
      "publicUrl": "/"
    }
  },
  "scripts": {
    "serve": "parcel ./public/index.html --port 3000 --no-source-maps",
    "build": "parcel build ./public/index.html --no-source-maps"
  },
  }



你可以參照如下兩個(gè)網(wǎng)站進(jìn)行查閱。

https://v2.parceljs.org/configuration/package-json/
https://v2.parceljs.org/features/cli/



這里就簡(jiǎn)單地介紹下。

    source 指定要映射到目標(biāo)的源代碼的入口點(diǎn)，可以是字符串或數(shù)組。
    targets 可以通過package.json＃targets對(duì)象進(jìn)一步配置目標(biāo)。
    includeNodeModules 是否捆綁所有/無/某些node_module依賴項(xiàng)。
    context 捆綁軟件應(yīng)在哪個(gè)運(yùn)行時(shí)中運(yùn)行。
    distDir 指定輸出文件夾（而不是輸出文件）
    outputFormat 應(yīng)該排放哪種類型的進(jìn)出口
    scopeHoist 是否啟用示波器吊裝對(duì)于ESM和CommonJS outputFormat，需要為true。
    optimize 是否啟用縮小功能（確切的行為由插件決定）。
    publicUrl 捆綁軟件在運(yùn)行時(shí)的公共網(wǎng)址。

--port 3000就是設(shè)置端口號(hào)為3000的服務(wù)器網(wǎng)址。--no-source-maps不啟用source-maps。

終于，解釋完配置項(xiàng)了。下面到了關(guān)鍵時(shí)期，就是我們啟用下項(xiàng)目好使不。

鍵入命令:

yarn serve



OR

npm run serve



打開網(wǎng)址http://localhost:3000/#/。



啟動(dòng)Vue3項(xiàng)目成功！?。?br>
下面我們?cè)囋嚐岣掠卸嗫欤?br>


哇塞！150ms!的確很快。

驗(yàn)證完開發(fā)環(huán)境，我們?cè)囅律a(chǎn)環(huán)境。

yarn build



OR

npm run build



打包速度也非?？?！



那么我們放到線上，看看好使不！

https://www.maomin.club/site/test1/#/





絲毫不差！

源碼地址：

https://github.com/maomincoding/parcel-vue-app



但是，到這里我們雖然成功運(yùn)行起來項(xiàng)目了。但是離搭建Vue3項(xiàng)目構(gòu)建工具還差一點(diǎn)。
四、搭建一款極快，零配置的Vue3項(xiàng)目構(gòu)建工具

這里，我們將使用commander這個(gè)命令行工具作為主導(dǎo)開發(fā)一套命令行腳手架工具。除了它，我還有用到chalk，它的作用主要是美化命令行輸出樣式。inquirer它的作用是進(jìn)行命令行交互的。

我這里就不過多介紹了，大家可以去它們的官方網(wǎng)站了解詳情。

我們目的就是通過命令行來安裝我們搭建的項(xiàng)目模板，所以肯定是需要推送到NPM上。關(guān)于怎樣將插件推送到NPM上，我的其他文章也有講述，可以瀏覽了解下。

我們命名腳手架為parcel-vue-cli———Parcel-vue-app項(xiàng)目構(gòu)建工具。

你可以這樣使用它：
安裝

npm install parcel-vue-cli -g



初始化

parcel-vue-cli init <projectName>



查看版本

parcel-vue-cli -v



趕快行動(dòng)起來，構(gòu)建Parcel-vue-app項(xiàng)目吧！



源碼地址：

https://github.com/maomincoding/parcel-vue-cli

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路