【Parcel 2 + Vue 3】從0到1搭建一款極快，零配置的Vue3項目構(gòu)建工具
前言
一周時間，沒見了，大家有沒有想我啊!哈哈!我知道肯定會有的。言歸正傳，我們切入正題。上一篇文章中我主要介紹了使用Vite2+Vue3+Ts如何更快的入手項目。那么，今天我將會帶領(lǐng)大家認識一個新的Vue3項目構(gòu)建工具——parcel-vue-cli。這是什么?怎么以前沒有聽說過。有這樣的疑問其實并不奇怪，因為這個構(gòu)建工具是我自己開發(fā)的。你可能會這樣問：“你自己開發(fā)的?這么厲害嗎”?是的，豆哥其實就這么厲害。開玩笑啦!其實沒有你想得那么厲害。都是搬磚人，主要看思路。好，不扯了!本篇文章我將帶大家如何從0到1開發(fā)一款極快，零配置的Vue3項目構(gòu)建工具(parcel-vue-cli)。名字就這么記著吧!
實戰(zhàn)
既然，從0開始，那么我們肯定需要先了解Parcel 2是什么東東?
一、介紹Parcel 2
了解Parcel 2之前呢，你得知道它上一個版本Parcel 1是啥。這是官方網(wǎng)址：https://parceljs.org/
官方是這樣介紹它的：
- Blazing fast, zero configuration web application bundler
- 極速、零配置的web應用捆綁包。
- 我們這里就簡單地介紹下它的幾個特性。
- Parcel使用工作進程來啟用多核編譯，并且有一個文件系統(tǒng)緩存，即使在重新啟動后也可以快速重建。
- Parcel提供了對JS、CSS、HTML、文件資產(chǎn)等的現(xiàn)成支持—不需要插件。
- 當需要時，代碼會使用Babel、postss和posthml自動轉(zhuǎn)換，甚至是node_modules。
- 使用動態(tài)import()語法，Parcel拆分輸出包，以便只在初始加載時加載所需的內(nèi)容。
- 在開發(fā)過程中進行更改時，Parcel會自動更新瀏覽器中的模塊，無需配置。
- Parcel在遇到錯誤時打印語法高亮顯示的代碼幀，以幫助您確定問題。
看完這些特性之后，是不是感覺跟Vite很相似。https://parceljs.org/getting_started.html這是文檔地址，如果還有小伙伴沒有接觸Parcel的，那么推薦你趕快試試去。今天，我們就不過多地介紹Parcel 1了，主要是為了拋磚引玉，為了咱的主角Parcel 2。Parcel 1都這么強大了，那么Parcel 2不就更厲害了嗎?別急!聽我細細道來。
如果你在找Parcel 2的官網(wǎng)怎么也沒找到，那就對了。https://github.com/parcel-bundler/parcel/tree/v2，你可以打開Parcel 2的github網(wǎng)址。我們滑到Features一欄，你會發(fā)現(xiàn)介紹的跟Parcel 1一樣，我去~ 還能再懶點嗎?整出來一個2，特性介紹還跟1一模一樣。莫著急，我們往下看會看到一段文字：
- 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/.
- 以下是在開始實施Parcel 2的工作之前創(chuàng)建的設計文檔，并且某些部分已經(jīng)過時。此處提供了包裹2的實際(有些完整)文檔：https://v2.parceljs.org/.
踏破特寫無覓處，得來全不費工夫。原來官網(wǎng)在這里，我們毫不留情地打開了它。
- Parcel是所有代碼的編譯器，無論使用哪種語言或工具鏈。Parcel會獲取您的所有文件和依賴項，進行轉(zhuǎn)換，然后將它們合并到較小的一組輸出文件中，這些文件可用于運行代碼。Parcel開箱即用地支持多種不同的語言和文件類型，從HTML，CSS和JavaScript等網(wǎng)絡技術(shù)到Rust等低級語言，以及任何可編譯為WebAssembly(WASM)的東西，再到圖像，字體，視頻，和更多。包裹使您的代碼可移植。您可以為不同的環(huán)境，服務器的Web或應用程序構(gòu)建代碼。您甚至可以一次建立多個目標，并在進行更改時實時更新它們。包裹快速且可預測。它在worker內(nèi)部并行隔離地編譯所有文件，并在運行時將所有文件緩存。緩存在計算機之間是穩(wěn)定的，并且僅受項目中文件和配置的影響(除非您要傳遞特定的環(huán)境變量)。
這是官方對Parcel的解釋，總之一點，記住它是一個web應用捆綁包就可以了。我們先不看側(cè)邊欄菜單那些內(nèi)容，先看看Parcel 2到底更新了啥?肯定不只是那些特性。我們打開頂部Blog欄，也就是這個網(wǎng)址https://v2.parceljs.org/blog/alpha1/，
也就是Parcel 2.0.0-alpha.1 。我們會看到下方這樣介紹。
- 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的第一個Alpha版本!請嘗試一下，幫助我們將包裹2送到終點線。在Github上查看!
看了看日子，是2019年-09-13年推出的，這日子到現(xiàn)在一年多了?？纯吹降赘铝松?
- Parcel 2是對Parcel的徹底改寫，我們已經(jīng)進行了一年多的研究，在此之前進行了將近一年的設計。它融合了我們從一開始就學習構(gòu)建Parcel所學到的一切，其結(jié)果比Parcel 1更具擴展性，可擴展性和可靠性，同時保留了您對Parcel期望的易用性和開發(fā)人員經(jīng)驗。
看到這樣的解釋，是不是很迫不及待了。不要著急，我們再往下看。
- Parcel 2從頭到尾都是完全可擴展的。插件類型已經(jīng)擴展，可以通過易于配置的管道擴展和覆蓋幾乎所有核心行為。盡管默認設置包括包裹1(及更多)中的所有內(nèi)容，但現(xiàn)在您可以根據(jù)需要自定義和擴展幾乎所有內(nèi)容。
- Parcel一直利用并行性和緩存來擴展到大型應用程序，而在Parcel 2中更是如此。我們現(xiàn)在可以緩存和并行化Parcel的更多工作，因此您可以期望更快的構(gòu)建，尤其是緩存的構(gòu)建。我們還保留了更少的內(nèi)存，因此Parcel 2可以擴展到更大的應用程序。
- Parcel 2提高了緩存的可靠性，同時將性能最大化。我們利用全新的跨平臺文件系統(tǒng)監(jiān)視程序，即使Parcel未運行，該監(jiān)視程序也可以檢測粒度文件的更改。同時，我們的資產(chǎn)圖可以超精細地失效，這意味著緩存的構(gòu)建幾乎具有與監(jiān)視模式完全相同的性能!
Parcel 2是可配置的。Parcel 2 CLI內(nèi)置的默認配置足以滿足大多數(shù)應用程序的需求，并包括Parcel 1支持的所有功能以及更多功能，但是Parcel 2支持通過專門為每個Parcel核心設計的一整套插件類型，通過其他功能擴展核心階段。
下面還有很多特性解釋，我這里因為篇幅的原因，就不過多解釋了。其實我看來，最具特色的更新是Transformers。Transformers將代碼和其他資產(chǎn)從一種語言編譯成另一種語言，或者只是以某種方式轉(zhuǎn)換文件。例如，TypeScript轉(zhuǎn)換器將TypeScript編譯為JavaScript，而Babel轉(zhuǎn)換器將JavaScript轉(zhuǎn)換為其他JavaScript。轉(zhuǎn)換程序還負責從代碼中提取依賴項，例如import語句和要求調(diào)用，這些依賴關(guān)系將傳遞回解析器，另一個轉(zhuǎn)換程序，依此類推，直到為應用程序構(gòu)建完整的資產(chǎn)圖。另外，為什么重點說Transformers呢?是因為本篇文章使用了@parcel/transformer-vue，在這里解釋Transformers有助于下面理解。
看完了第一個Alpha版本!我們來看第一個Beta版。
- Improved tree shaking (改進的樹狀搖動)
- Faster source map generation (source更快的源地圖生成)
- Improved content hashing (改進的內(nèi)容散列)
- Resolver diagnostics (解析器診斷)
- More accurate bundle reports (更準確的捆綁包報告)
- Tons of bugfixes and improvements (大量的錯誤修正和改進)
這是Parcel 2的第一個beta版本。這意味著它比每晚或alpha版本更穩(wěn)定，但是在完全穩(wěn)定的版本發(fā)布之前，仍需要進行一些更改。特別是，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
我們可以這樣使用它，當然這里是以React.js項目為例，你還可以安裝其他語言。
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"));
在上面的示例中，您可以看到兩個命令，開發(fā)命令parcel serve index.html和parcel build index.html用于創(chuàng)建生產(chǎn)版本。
示例中的命令以index.html作為入口點，而不是JavaScript文件作為入口點，這與其他捆綁程序不同。使用HTML文件作為入口點使Parcel易于使用，因為它可以直接從HTML文件中檢測依賴關(guān)系，并將所有檢測到的依賴關(guān)系自動捆綁到各自的捆綁包中，而無需進行任何配置。Parcel甚至可以自動執(zhí)行更高級的功能，例如差異服務和編譯內(nèi)聯(lián)腳本和樣式，而無需任何配置。
這里是不是跟Vite很相似呢!
三、使用Parcel 2搭建一個Vue3項目
既然覺得跟Vite這么相似，那么我們要不也搭建一個項目構(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.
- 請注意，Parcel不支持在Vue 2中使用SFC，必須使用Vue 3 beta或更高版本。
既然都這么說了，我們就用Vue 3。官網(wǎng)說，Parcel支持Vue，而無需任何其他配置。頓時愛了!
話不多說，我們開始開發(fā)。
我們參照VueCLI的項目目錄開始創(chuàng)建文件以及文件夾。(我會在文末放出源碼地址，我這里先給出大概的文件目錄)
我們來直接看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"
- }
- }
為什么我這里會給出package.json文件呢?第一點呢?主要是讓大家看下我安裝的依賴就知道我要干什么了第二點呢?也是最重要的一點。我們知道像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ā)人員體驗，但是總是有一些邊際情況和實際用例需要更多的可定制性。
也就是說定制化配置你可以在package.json文件中配置。其他詳情配置參數(shù)你可以查看這里https://v2.parceljs.org/configuration/package-json/。
首先，我們來解讀下上面的package.json文件。我們的目的是為了搭建像Vite這樣的項目構(gòu)建工具。那么，既然是Vue3項目，肯定少不了vue-router、vuex、vue。接口請求工具我們使用axios。css預處理語言我們使用scss。模擬數(shù)據(jù)我們肯定使用mockjs。代碼檢測工具eslint這個大家肯定很熟悉了。@vue/compiler-sfc該軟件包包含較低級別的實用程序，如果您正在為將Vue單個文件組件(SFC)編譯為JavaScript的捆綁器或模塊系統(tǒng)編寫插件/轉(zhuǎn)換，則可以使用這些實用程序。注意，這里需要與Vue版本一致。剩下的兩個依賴@parcel/transformer-vue、@parcel/transformer-sass。則會在啟動項目時自動安裝，不需要你的手動安裝。我最后講一下@parcel/transformer-image這個依賴，一句話，當時被它坑慘了。
我下面總結(jié)了一下，你需要仔細看下面的內(nèi)容，要不然跟我一樣。熬夜熬到兩點鐘，也解決不了問題。
當我安裝完上面依賴時，那時還沒安裝@parcel/transformer-image依賴(因為沒仔細看文檔)。我非常高興地啟動項目，結(jié)果發(fā)現(xiàn)img標簽引入圖片顯示不出來。我就疑問了，我又采用了require()也不好使。最重要的是一頓報錯。于是，又回頭看了下文檔。我看到這里https://v2.parceljs.org/recipes/image/，我心里覺得原來沒有安裝它啊，于是我手動的安裝了@parcel/transformer-image。但是，一直在安裝sharp這地方卡著。我又看了下文檔。
- 要進行這些圖像轉(zhuǎn)換，我們依賴于圖像轉(zhuǎn)換庫Sharp，因此我們要求您使用npm install sharp -D或yarn add sharp -D在本地安裝它。
好吧，我終止了下載，我就不信了。單獨安裝下sharp還不行嗎?果然，出錯出在這。我通過查看sharp的官方文檔，總結(jié)了一下解決措施。
1.獲取文件
打開網(wǎng)址：
- https://github.com/lovell/sharp-libvips/
查找與您的計算機環(huán)境匹配的兩個文件。它們是以下兩個文件，xxx代表計算機環(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。
2.查找文件夾
鍵入以下命令以獲取NPM緩存路徑。
- npm config get cache
獲取路徑后，在該路徑下找到_libvips該文件夾，將上述兩個文件放入該文件夾中并重新啟動安裝命令。
這樣，你直接安裝@parcel/transformer-image即可，因為安裝它的時候自動安裝上了sharp。
安裝依賴的問題現(xiàn)在已經(jīng)解決完了，下面，我們簡單地講一下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"
- },
- }
你可以參照如下兩個網(wǎng)站進行查閱。
- https://v2.parceljs.org/configuration/package-json/
- https://v2.parceljs.org/features/cli/
這里就簡單地介紹下。
- source 指定要映射到目標的源代碼的入口點，可以是字符串或數(shù)組。
- targets 可以通過package.json#targets對象進一步配置目標。
- includeNodeModules 是否捆綁所有/無/某些node_module依賴項。
- context 捆綁軟件應在哪個運行時中運行。
- distDir 指定輸出文件夾(而不是輸出文件)
- outputFormat 應該排放哪種類型的進出口
- scopeHoist 是否啟用示波器吊裝對于ESM和CommonJS outputFormat，需要為true。
- optimize 是否啟用縮小功能(確切的行為由插件決定)。
- publicUrl 捆綁軟件在運行時的公共網(wǎng)址。
--port 3000就是設置端口號為3000的服務器網(wǎng)址。--no-source-maps不啟用source-maps。
終于，解釋完配置項了。下面到了關(guān)鍵時期，就是我們啟用下項目好使不。
鍵入命令:
- yarn serve
OR
- npm run serve
打開網(wǎng)址http://localhost:3000/#/。
啟動Vue3項目成功!!!
下面我們試試熱更新有多快!
哇塞!150ms!的確很快。
驗證完開發(fā)環(huán)境，我們試下生產(chǎn)環(huán)境。
- yarn build
OR
- npm run build
打包速度也非?？欤?/p>
那么我們放到線上，看看好使不！
- https://www.maomin.club/site/test1/#/
絲毫不差!
源碼地址：
- https://github.com/maomincoding/parcel-vue-app
但是，到這里我們雖然成功運行起來項目了。但是離搭建Vue3項目構(gòu)建工具還差一點。
四、搭建一款的Vue3項目構(gòu)建工具
這里，我們將使用commander這個命令行工具作為主導開發(fā)一套命令行腳手架工具。除了它，我還有用到chalk，它的作用主要是美化命令行輸出樣式。inquirer它的作用是進行命令行交互的。
我這里就不過多介紹了，大家可以去它們的官方網(wǎng)站了解詳情。
我們目的就是通過命令行來安裝我們搭建的項目模板，所以肯定是需要推送到NPM上。關(guān)于怎樣將插件推送到NPM上，我的其他文章也有講述，可以瀏覽了解下。
我們命名腳手架為parcel-vue-cli———Parcel-vue-app項目構(gòu)建工具。
你可以這樣使用它：
安裝
- npm install parcel-vue-cli -g
初始化
- parcel-vue-cli init <projectName>
查看版本
- parcel-vue-cli -v
趕快行動起來，構(gòu)建Parcel-vue-app項目吧！
源碼地址：
- https://github.com/maomincoding/parcel-vue-cli
結(jié)語
謝謝閱讀，希望沒有浪費您的時間。Parcel 2還有很多可以玩的地方，比如說你也可以自己搭建一個parcel-react-cli，然后全局命令使用它。是不是有種成就感呢!
