parcel的基本用法

安裝：

yarn安裝：yarn global add parcel-bundler

npm安裝：npm install -g parcel-bundler

入門：

parcel index.html --open --port 8080

開啟一個localhost:8080來展示本地編譯好的index.html

——open：開啟瀏覽器

-p， ——port ：設定埠，預設：1234

——public-url： 靜態資原始檔夾路徑

——no-hmr # false 是否開啟程式碼熱更新

——no-cache # false 是否啟用快取機制，用於快取引起的程式碼更新不及時的問題排查

——no-source-maps # false 是否啟用source-maps檔案，主要用於錯誤排查與定位

——no-autoinstall # false 很多資原始檔的loader包是自動下載的，程式碼會將沒有路徑的包當成npm包自動下載，發現程式碼自動下載不需要的npm包是，需要開啟這個屬性

-t， ——target ［target］ # browser 程式碼目標環境 node | browser | electron

——log-level # 1 日誌輸入級別 0 | 1 | 2 | 3 對應 不輸出日誌 | 僅錯誤日誌 | 警告與錯誤日誌 | 所有日誌

parcel build [path]

-d， ——out-dir # 打包目標資料夾 預設 “dist”

-o， ——out-file # 專案入口檔案的檔名，預設與——public-url 一致

——no-minify # 打包時不壓縮原始檔

——detailed-report # 列印詳細打包資源報告

模組熱更新，在開發工具中不起作用時，參照以下操作：

資源引入：

1。圖片等資源可以直接引入，

2。style檔案，如果原生css檔案可以直接引入，如果是預編譯語言，比如sass，可以引入，引入後parcel會自動調取node程序下載所需依賴包：

下載完成後即會支援。

3。js檔案：同樣對於js預編譯語言，也會遵循以上原則，比如typescript，如果你引入ts資原始檔，會自動下載typescript依賴包來進行支援

4。vue檔案：同上

5。依賴包：如果你想引入一個依賴包，但是還沒有npm install ，沒關係，只需要直接引入即可，parcel會自動幫你下載，以vuex為例：

如果我想下特定版本號的包，怎麼辦？你可以這樣：

不過下載完成後，編譯會報錯，這時候package。json裡已經記錄了你要下載的版本號，只需要上面圖裡面的版本號去掉就可以了

多頁面：

parcel index。html page2。html page3。html

多頁面編譯存在一個問題：頁面更改都會引起重新編譯，但是隻有index。html更改會引起瀏覽器的重新整理

打包：

parcel build index。html

應用總結：

1。支援ES6語法：import，但是不支援解構：import {a} from “。/module”

2。支援commonjs語法：require，module

3。支援資源引入