詳解Parcel：快速，零配置web應用打包工具

譯者按： 新一代Web應用打包工具Parcel橫空出世，快速、零配置的特點讓人眼前一亮。

原文: Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler ?
譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

Parcel有什麼特別的，我為什麼要關心它？

雖然webpack提供了非常多靈活的配置，但是與之帶來的是複雜度的提升，而Parcel卻非常的簡潔。Parcel自己的口號也是非常直白：零配置。

為什麼這麼神奇？— Parcel有一個開箱即用的開發伺服器。開發伺服器會在您更改檔案時自動重建您的應用程式，並支援熱模組過載以實現快速開發。

Parcel有什麼好處？

快速捆綁時間 - Parcel比Webpack，Rollup和Browserify更快。

然而需要注意的是：Webpack仍然很棒，有時可能會更快

Parcel支援JS，CSS，HTML，file assets等等，並且不需要外掛配置，使用者體驗更友好。
零配置需要：開箱即用的程式碼分割，熱模組重新載入，css前處理器，開發伺服器，快取等等！
更友好的錯誤日誌。

Fundebug：及時發現Bug，提高Debug效率！

什麼情況下使用Parcel，Webpack或Rollup？

其實主要取決於你自己，但我個人會通過以下情況來選擇適合的：

Parcel：中小型專案（1.5萬行程式碼以內）。 Webpack：大型企業規模專案。 Rollup：用於NPM包。

安裝非常簡單

npm install parcel-bundler --save-dev
複製程式碼

我們在本地安裝了 parcel-bundler的npm包,現在我們需要初始化一個node專案。

接下來，建立index.html 和 index.js 檔案。

把index.html 和 index.js 關連起來。

最後將parcel指令碼新增到我們的package.json中

這就是所有的配置，是不是非常簡單。

接下來，讓我們開啟伺服器。

效果明顯了，大佬們請注意構建時間！

15ms?! 是不是很牛逼！

再看一下HMR

也感覺非常快啊。

SCSS

同樣先需要裝node-sass包

npm i node-sass && touch styles.scss
複製程式碼

接下來，新增一些樣式並將styles.scss匯入index.js檔案。

生產構建

我們所需要的只是將一個build指令碼新增到我們的package.json中

執行build指令碼

看看Parcel如何讓我們的生活變得輕鬆？

你可以像這樣指定一個特定的build路徑：

parcel build index.js -d build/output
複製程式碼

Fundebug錯誤實時監控為您的React專案保駕護航！

React

設定React非常簡單，我們需要做的就是安裝我們的依賴並設定我們的.babelrc。

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc
複製程式碼

來寫個初始化React元件玩玩吧！

Fundebug錯誤實時監控為您的Vue專案保駕護航！

Vue

首先安裝vue和parcel-plugin-vue ，其中parcel-plugin-vue用於.vue元件支援。

$ npm i --save vue parcel-plugin-vue
複製程式碼

需要新增我們的根元素，匯入vue的index檔案並初始化Vue。

首先生成個vue目錄，然後建立index.js和app.vue。

$ mkdir vue && cd vue && touch index.js app.vue
複製程式碼

在index.html引用ndex.js。

最後，讓我們初始化vue並編寫我們的第一個vue元件！

TypeScript

這個非常簡！只需安裝TypeScript，我們就可以開始。

npm i --save typescript
複製程式碼

建立index.ts檔案並將其插入index.html。