繼 Browserify、Webpack 之后，又一款打包工具 Parcel 橫空出世

Parcel.js 的官網有這樣的自我介紹 “極速零配置Web應用打包工具”

簡單接觸了一下，單從效率上來說，確實要比 webpack 強上不少，可坑也挺多，未來升級之后應該會逐漸普及

官方文檔：https://parceljs.org/getting_started.html

官方 GitHub：https://github.com/parcel-bundler/parcel

一、基本用法

Parcel 可以用 npm 或 yarn 安裝，個人習慣用 npm，這篇博客將基于 npm 講解

首先需要全局安裝 Parcel.js    // 當前版本 1.3.0

npm install -g parcel-bundler

然后寫一個配置文件...不對，這不是 webpack，這是 parcel， 零配置打包

直接創建項目目錄，用寫個一個簡單的傳統頁面

然后在項目根目錄打開命令行工具，輸入以下命令

parcel index.html -p 3030

然后在瀏覽器中打開 http://localhost:3030/ 就能打開剛才開發的頁面

上面的命令中 -p 用于設置端口號，如果不設置，則默認啟動 1234 端口

parcel 支持熱更新，會監聽 html、css、js 的改變并即時渲染

// 實際上通過 src 引入的 css、js 無法熱更新

開發完成后，輸入以下命令進行打包

parcel build index.html

打包后會生成 dist 目錄

橋豆麻袋，說好的打包呢？怎么還是這么多文件？

騷年莫急，這是用傳統寫法寫的頁面，連 package.json 都沒有，接下來改造成模塊化的項目，就能看到打包的效果了

好吧，那我先手動打開 index.html 看看效果...等等...為啥 css 沒被加載？

這是因為打包后的路徑都是絕對路徑，放在服務器上沒問題，如果需要本地打開，就得手動修改為相對路徑

二、應用在模塊化項目中

正片開始，首先將上面的項目改造成模塊化項目

通過 npm init -y 命令創建一個默認的 package.json，并修改啟動和打包命令

這樣就可以直接通過 npm run dev 啟動項目，npm run build 執行打包了

之前是全局安裝的 parcel，實戰中更推薦在項目中添加依賴

npm install parcel-bundler -S

上面是一個傳統頁面，使用 link 引入的 css

既然要改造為模塊化項目，那就只需要引入一個 main.js，然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 語法，那就安裝一個 babel 吧

npm install babel-preset-env -S

然后在根目錄創建一個 .babelrc 文件，添加以下配置：

{ "presets": ["env"]}

再安裝一個 css 轉換工具，比如 autoprefixer

npm install postcss-modules autoprefixer -S