繼續來一個純手打翻譯
文章是Parcel的主要開發者devongovett寫的, 很值得一看, 於是翻譯併發布出來. 原文連結
關聯一下以前釋出過的將typescript+react的webpack專案遷移到parcel
? Parcel v1.6.x: ES6+/JSX零配置, 支援Node/Electron應用, 打包統計分析, 以及各項更新和改進! ?
檢視Github
Parcel更新很迅速. Parcel v1.6.0是繼v1.5.0三週後的一個重大更新, 其中包括超過15項新特性, 大量的bugfix和改進. 較為突出的有:
- ? ES6+ Babel編譯零配置 — 最新版本更容易讓你的專案以更少的配置啟動: .babelrc現在是可選的! 當你使用babel-preset-env時, Parcel自動編譯ES6+ (包括node_modules!), 而且你可以輕鬆地通過在package.json中指定一個browserslist key覆蓋預設瀏覽器target
- ⚛️ 預設支援React/Preact的jsx語法 — JSX支援在最新版本是完全自動支援的, 無需額外配置! 如果你正在寫React/Preact的程式, 你不在需要一個.babelr檔案來啟動, Parcel如果檢測到你在使用React/Preact, 會為你自動開啟JSX語法支援. ?
- ? Node/Electron targets — Parcel現在支援打包Node/Electron應用了. 這些環境的原生特性比如fs的內聯使用是不被允許的, 而且node_modules也不會被打包.
- ? 生產環境打包分析 — 現在當你打包生產環境程式碼時, Parcel能記錄每個bundle的大小和編譯時間. 作為一個可選項, 您可以檢視更詳細的報告, 列出每個包中最大的檔案, 以幫助您優化.
- 6️⃣ Node 6支援 — Parcel現在可以在Node 6版本上跑了. 如果你還是用Node 6以下的版本, Parcel是執行不了的.
- ✅ 3C WebManifest支援 — 對PWA應用來說這是很重要的, Parcel可以解釋你的HTML中的.webmanifest檔案, 處理比如homescreen icons這樣的依賴, 還有service workers
- 一些bugfix和改進
非常感謝為此作出貢獻的人. ?
Babel編譯零配置
Babel在Parcel中一直是開箱即用的, 用以編譯現代JavaScript為瀏覽器可用的程式碼. 但是, 在此之前, 你仍然需要寫一個.babelrc配置檔案以及安裝一些必要的presets/plugins.
現在不再需要了! Parcel現在預設使用babel-preset-env, 支援零配置地按照你指定的瀏覽器/node環境去編譯現代JavaScript: .babelrc不再是必需的了. ?
預設情況下, Parcel為具有> 1%市場份額的引擎編譯瀏覽器程式碼, Node環境的話是編譯到當前LTS版本(現在是6.0.0), 但是你可以在package.json中指定一個browserslist值來覆蓋.
Parcel同樣支援編譯node_modules中的ES6+程式碼! 如果一個模組的指定target高於程式的版本, 這個模組編譯時的target會被降至程式的targets. 這意味使用ES6+寫的模組可以釋出到npm倉庫, 同時你的程式仍然可以不用任何配置就使用這些模組. 模組僅僅會在必要時候被編譯: 如果ES6 classes在程式中被支援, node_modules中的classes不會被編譯
當你需要額外的配置時, .babelrc檔案仍然是可以被檢測到的. 然而，這不再適用於node_modules，只有應用程式中的程式碼才適用，因為之前的做法造成了太多的問題.
預設的React/Preact JSX語法支援
繼續這個主題, Parcel v1.6.x同樣支援了JSX的開箱即用. Parcel會自動檢測你是否安裝了React/Preact依賴, 開啟JSX語法支援, 並且選擇你正在使用的庫的正確的JSX編譯指示. 預設是React, 可是Preact也是支援的, 如果你願意去社群貢獻的話, 要加上其他庫也是很容易的.?
這兩個特性 — babel-preset-env零配置, 預設支援JSX語法 — 組合起來提供了一個React程式的完整的零配置起點. 不需要更多的配置Babel就可以啟動程式! 如果你需要開啟一些額外的特性, 你還是可以後續加一個.babelrc. ?
感謝Sheel Patel為Parcel新增了這個特性! ?
Node/Electron Targets
Parcel開始時是為web程式提供一個快速, 零配置的開發體驗. 但是今天, JavaScript的使用已經超出了web瀏覽器, 它可以被使用在伺服器, 桌面, 移動apps...
Parcel v1.6.0 現在為Node/Electron提供了targets, 為其對應的環境友好地輸出程式碼. 由於這些環境都有它們自有的模組系統, 並且提供一些比如filesystem的原生方法, 當你指定targets為Node/Electron時Parcel禁用了若干為瀏覽器鋪墊的特性.
不是就近的依賴(比如 import express from 'express') 會被指定為從node_modules獲取並按原樣保留, 不打包. 就近依賴的(比如import car from './car') 則照常打包.
fs.readFileSync不打包
Buffer, __dirname這些全域性變數不打包
Hot Module Loading runtime不打包(for --target=node)
如果是預設設定--target=browser, 你的瀏覽器app照常不變
感謝Guilherme Bernal為Parcel新增了這個特性! ?
生產環境打包分析
當為生產環境打包時, Parcel現在可以記錄分析關於包的大小和構建時間. 搭配--detailed-report使用, Parcel同時會提供每個包中按檔案大小分列的頂層資源的細目. 當有一個非常大的包時, 它甚至會警告你應該去看看. ⚠️
我希望將來進一步擴充套件並完善這個功能, 以便更深入地瞭解你的程式碼.
感謝Jasper DeMoor為這個特性持續努力! ?
來試試吧!
Parcel還有很長的路要走，我們才剛剛開始。我等不及要看你用它來做些什麼了!
如果你發現任何bug, 可以在Github上面向我們報告. 也可以在Twitter上@devongovett