本文最初發(fā)布于Medium上freeCodeCamp的博客站點，經(jīng)原作者授權(quán)由InfoQ中文站翻譯并分享。
什么？又有一個打包器（bundler）/構(gòu)建工具？是的——果真如此，演化和創(chuàng)新相結(jié)合為我們帶來了Parcel：
https://parceljs.org/
Parcel有什么特殊之處，為什么值得關(guān)注呢？
webpack要有大量的配置，這樣帶來的成本就是復(fù)雜性——與此相對的，Parcel帶來了簡潔性。Parcel將自己標(biāo)榜為“零配置”。
Parcel內(nèi)置了一個開發(fā)服務(wù)器，這個開發(fā)服務(wù)器能夠在我們修改文件之時自動重新構(gòu)建應(yīng)用，為了加快開發(fā)，它還支持模塊熱替換。
Parcel的好處是什么？
更快的構(gòu)建速度：Parcel比Webpack、Rollup和Browserify更快；
需要注意：Webpack依然非常棒，有些場景下它仍然會更快一些。
Parcel內(nèi)置支持JS、CSS、HTML、文件資產(chǎn)等等，這不需要插件，對用戶會更加友好；
零配置，內(nèi)置了code splitting、熱模塊加載、CSS預(yù)處理、開發(fā)服務(wù)器、緩存等等；
Parcel有更加用戶友好的錯誤日志。
那么，我們該何時使用Parcel、Webpack或Rollup呢？
這完全取決于你，但是我個人會在以下場景中使用不同的打包器：
Parcel：小型到中型規(guī)模的項目（代碼行小于15k）
Webpack：大型以及企業(yè)級規(guī)模的項目；
Rollup：用于NPM包。
接下來，我們快速看一下Parcel。
安裝
Parcel的安裝非常簡單直接。
npm install parcel-bundler --save-dev
我們在本地安裝了parcel-bundler npm包，現(xiàn)在我們要初始化一個node項目。
接下來，我們創(chuàng)建index.html和index.js文件：
現(xiàn)在，我們將index.html和index.js文件連接起來：
最后，添加parcel腳本到package.json中：
這就是要配置的所有內(nèi)容——超乎想象地節(jié)省時間！
接下來，我們啟動服務(wù)器！
請注意構(gòu)建時間：
只要15ms，確實是非常快的！
那HMR的效果怎樣呢？
同樣感覺是非常快的。
SCSS
我們只需node-sass包。
npm i node-sass && touch styles.scss在就緒之后，我們添加一些樣式并在index.js中導(dǎo)入styles.scss：
styles.scss
body { background: steelblue; color: white;}index.js
import './styles.scss';document.write('hmr + hmr + hmr');生產(chǎn)環(huán)境的構(gòu)建
我們需要添加一個build腳本到package.json中：
運行我們的構(gòu)建腳本：
看到Parcel給我們帶來多大的便利嗎？
還可以通過下面的方式指定特定的構(gòu)建路徑：
parcel build index.js -d build/outputReact
搭建React環(huán)境非常簡單，需要做的就是安裝依賴并搭建.babelrc：
npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc.bablerc的內(nèi)容如下：
{ "presets": ["env", "react"]}一切準(zhǔn)備就緒，接下來見識一下它的威力，在繼續(xù)下面的內(nèi)容之前，請嘗試編寫我們的初始react組件。
Vue
接下來，是一個使用Vue的樣例。
首先，安裝vue和parcel-plugin-vue，其中后者是用來支持.vue組件的。
$ npm i --save vue parcel-plugin-vue我們需要添加根元素，導(dǎo)入vue index文件并初始化vue。
首先，創(chuàng)建一個vue目錄，然后創(chuàng)建index.js和app.vue文件
$ mkdir vue && cd vue && touch index.js app.vue現(xiàn)在，我們修改index.js和index.html文件：
最后，初始化vue并編寫第一個vue組件。
就這樣，我們安裝了Vue，并且還能支持.vue。
TypeScript
這一項非常容易，只需安裝TypeScript就可以了。
npm i --save typescript創(chuàng)建名為index.ts文件并插入到index.html中。
源碼
以上樣例的源碼都可以通過GitHub獲取：
https://github.com/wesharehoodies/parcel-examples-vue-react-ts
原文地址：
https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082
京公網(wǎng)安備 11010502049343號