“0配置”打包器（bundler）Parcel

官網

webpack 要有大量的配置，這樣帶來的成本就是復雜性——與此相對的，Parcel 帶來了簡潔性。Parcel 將自己標榜為“零配置”。

Parcel 內置了一個開發服務器，這個開發服務器能夠在我們修改文件之時自動重新構建應用，為了加快開發，它還支持模塊熱替換。

Parcel 內置支持 JS、CSS、HTML、文件資產等等，這不需要插件，對用戶會更加友好；

零配置，內置了 code splitting、熱模塊加載、CSS 預處理、開發服務器、緩存等等；

Parcel 有更加用戶友好的錯誤日誌。

不同場景適用打包器

Parcel：小型到中型規模的項目（代碼行小於 15k）；

Webpack：大型以及企業級規模的項目；

Rollup：用於 NPM 包。

Parcel簡單使用

Parcel 的安裝非常簡單直接。

npm install parcel-bundler --save-dev

Parcel的入口可以是html或者js文件

dev方式

parcel index.html

parcel的hmr（熱替換）也是很快的。

當然我們可以在package.json文件裏配置命令:

就可以使用npm run start構建了。

build方式

parcel build index.js

也可以加參數指定構建路徑：

parcel build index.js -d build/output

package.json文件裏配置後可以使用npm run build命令打包。

集成開發環境

scss

npm i node-sass

執行命令後在js裏import進scss文件，這就可以使用啦。

React+babel

npm install --save react react-dom babel-preset-env babel-preset-react

執行後創建.bablerc文件，內容如下：

{
  "presets": ["env", "react"]
}

這樣就可以寫React啦：

index.js

index.html

<div id="root"></div>
 

<script src="./index.js"></script>

vue+babel

npm i --save vue parcel-plugin-vue babel-preset-env

執行後創建.bablerc文件，內容如下：

{
  "presets": ["env"]
}

index.js

app.vue

index.html

<div id="vue-app"></div>
<script src="./index.js"></script>

註意：

如果你是使用的全局安裝的parcel-bundler，可能在構建vue項目時出現上面的錯誤

問題很明確，找不到該模塊，只需要執行npm i --save parcel-bundler在項目裏安裝後再parcel index.html就好了。

所以開頭的vue相關包安裝命令可以為npm i --save vue parcel-plugin-vue parcel-bundler babel-preset-env。

parcel 中小型項目打包工具