• 原文地址：Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler ?
• 原文作者：Indrek Lasn
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：Fatezeros
• 校對者：MechanicianW tvChan

關於 Parcel 你所需要知道的一切：快速的 Web 應用打包工具 ?

真的嗎? 又一個打包/構建工具? 是的 —— 你應該相信, 進步和創新相結合給你帶來了 Parcel。

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

當 webpack 以高複雜性的代價給我們帶來了很多配置的時候 —— Parcel 卻很簡單。它號稱“零配置"。

揭開上面的疑惑 —— Parcel 有一個開箱即用的開發伺服器。它會在你更改檔案的時候自動重建你的應用程式，並支援 模組熱替換 以實現快速開發。

Parcel 有什麼優勢？

• 快速打包 —— Parcel 比 Webpack，Rollup 和 Browserify 打包更快。

Parcel benchmarks

需要考慮到的一點是：Webpack 仍然是極好的，並且有時候能更快

來源

• Parcel 支援 JS，CSS，HTML，檔案資源等 —— 無需外掛 —— 對使用者更加友好。
• 無需配置。開箱即用的程式碼拆分，熱模組更新，css預處理，開發伺服器，快取等等！
• 更友好的錯誤日誌。

Parcel 錯誤處理

那麼 —— 我們應該在什麼時候使用 Parcel, Webpack 或者 Rollup 呢?

這完全取決於你，但我個人會在以下情況使用不同的打包工具：

Parcel —— 中小型專案（<1.5萬行程式碼）

Webpack —— 大到企業級規模的專案。

Rollup —— NPM 包。

讓我們趕緊試下 Parcel 吧!

---

安裝非常簡單

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

我們在本地安裝了 parcel-bundler npm package。現在我們需要初始化一個 Node 專案。

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

將 index.js 連結到 index.html 中

最後新增 parcel 指令碼到 package.json

這就是所有的配置 —— 驚人的節省時間吧！

接下來，啟動我們的伺服器。

立竿見影！注意構建時間。

15 ms?! 哇，真是太快了！

新增一些 HMR 會怎麼樣呢?

也感覺非常快。

---

SCSS

我們所需要的只是 node-sass 包，讓我們開始吧！

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

接下來，新增一些樣式並且將 styles.scss 引入到 index.js

---

生產環境構建

我們所需要做的就是新增一個 build 指令碼到 package.json

執行我們的 build 指令碼。

看，Parcel 讓我們的生活變得多麼輕鬆？

你也可以像這樣指定一個特定的構建路徑：

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

---

React

配置 React 也相當簡單, 我們所需要做的只是安裝 React 依賴並配置 .babelrc

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

那麼！！！就讓我們使出殺手鐗吧！繼續往下看之前，你自己可以嘗試寫一個初始的 react 元件。

---

Vue

同樣，這是個 Vue 的例子

首先安裝 vue 和 parcel-plugin-vue —— 後者用於支援 .vue 元件。

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

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

首先建立一個 vue 目錄，並建立 index.js 和 app.vue

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

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

現在將 index.js 掛載到 index.html

最後，讓我們例項化 vue，並寫第一個 vue 元件！

瞧！我們安裝了 Vue，並支援 .vue 檔案

---

TypeScript

這部分非常容易。只需安裝 TypeScript，讓我們開始吧！

npm i --save typescript
複製程式碼

建立一個 index.ts 檔案，並將它插入到 index.html 中

準備好了就去做吧！

Github原始碼

---

如果你認為這篇文章有用，請給我一些鼓勵，並讓更多的人看到它！

可以關注我的 twitter 瞭解更多！

感謝閱讀！ ❤

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。