譯者按： 新一代Web應用打包工具Parcel橫空出世，快速、零配置的特點讓人眼前一亮。
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
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。
