詳解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。

推薦

• 黑科技！Fundebug支持可視化重現出錯場景
• Fundebug支持用戶行爲回溯