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