[譯]關於 Parcel 你所須要知道的一切：快速的 Web 應用打包工具

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。