1. 程式人生 > >繼webpack後又一打包神器Parcel

繼webpack後又一打包神器Parcel

cli 前端 ctype cnblogs set mage web應用 即使 熱替換

前言:

  在繼grunt、gulp實現自動化構建之後,webpack又引領前端打包潮流,眾所周知的是,vue-cli的腳手架就是基於webpack進行項目打包的。而webpack還在上升的勢頭的時候,又一打包神器橫空出世——parcel。

Parcel

快速,零配置的 Web 應用程特性  

  快速打包

    Parcel 使用工作進程啟用多核編譯,並具有文件系統緩存,即使在重新啟動後也可快速重新構建。
  打包所有資源
    Parcel 支持JS,CSS,HTML,文件資源等等 - 不需要安裝任何插件。
  自動轉換
    在需要時,代碼使用 Babel,PostCSS 和 PostHTML 自動轉換 - 即使是 node_modules。

  零配置代碼拆分
    Parcel 使用動態 import() 語法拆分您的輸出包,所以只加載初始加載時所需的內容。
  模塊熱替換
    當你在開發過程中進行更改時,Parcel 會自動更新瀏覽器中的模塊,不需要進行任何配置。
  友好的錯誤記錄
    遇到錯誤時,Parcel 會以語法高亮的形式打印的代碼幀,以幫助你查明問題。

為啥用 parcel?

  現在有很多Web應用程序打包工具,包括webpack 和 browserify。所以,我們為什麽還需要一個呢?主要的原因是圍繞開發者的經驗。 

  很多打包工具都圍繞配置和插件進行構建的,因此看到有500行以上配置的應用程序正常運行並不罕見。這種配置不僅繁瑣和費時,而且也很難得到正確的配置,必須為每個應用程序復制。通常情況下,這可能導致次優化的應用程序發送到生產環境。parcel 被設計為零配置:只要將它指向你的應用程序的入口點,它就能做正確的事情。

  現有的打包工具大多都執行得慢,具有很多文件和依賴的大型應用將花費數分鐘去構建,隨著時間的推移,這將會相當痛苦的事情。監聽文件變更能幫助重新編譯,當時初始構建的時候通常還是會很慢。parcel 利用現代的多核處理能力和工作線程去並行編譯你的代碼。這導致了初始構建的速度極大的提升。它還有一個文件系統緩存,可以保存每個文件的編譯結果,以便更快的後續啟動。
  最後,現有的打包工具都是圍繞字符串加載/轉換進行構建的,其中轉換需要一個字符串,解析它,然後進行一些轉換,之後再次生成代碼。通常這最終導致許多解析和代碼生成在單個文件上運行,這是低效的。相反,parcel 的轉換工作在 AST上,所以這樣每個文件就有一個解析,多個轉換和一個代碼生成。

Parcel 是如何工作的? 

  Parcel 將 資源 樹轉換成 包(bundles) 樹。許多其它的打包工具基本上是基於 JavaScript 資源,還有附加在其上的其它格式的資源。例如,在 JS 文件中內聯成字符串。 Parcel 是對文件類型無感知的,它能按你所期待的方式那樣與任意類型的資源工作,且毋須配置。
  構建資源樹
  Parcel 接受單個入口資源作為輸入,可以是任意類型:JS、HTML、CSS、圖片文件等等。在 Parcel 中定義了許多不同的資源類型,它知道如何去處理特定的文件類型。資源會被解析,資源的依賴會被提取,資源會被轉換成最終編譯好的形態。此過程創建了一個資源樹。
  構建文件束樹
  一旦資源樹被構建好,資源會被放置在文件束樹中。首先一個入口資源會被創建成一個文件束,然後動態的 import() 會被創建成子文件束 ,這引發了代碼的拆分。當不同類型的文件資源被引入,兄弟文件束就會被創建。例如你在 JavaScript 中引入了 CSS 文件,那它會被放置在一個與 JavaScript 文件對應的兄弟文件束中。如果資源被多於一個文件束引用,它會被提升到文件束樹中最近的公共祖先中,這樣該資源就不會被多次打包。
  打包
  在文件束樹被構建之後,每個文件束都會被 packager 寫到一個特定文件類型的文件中。packagers 知道如何從每個資源中將代碼合並起來,生成到最終被瀏覽器加載的文件中。
[ps:基於官網https://parceljs.org/進行的總結]

入門Demo

  一、初始化npm

npm init

  二、添加babel 並安裝 babel-preset-env依賴

  1.新建.babelrc 文件 

{
  "presets": [
    "env"
  ]
}

  2.安裝依賴

npm install babel-preset-env --save-dev

  三、添加parcel

npm install parcel-bundler --save-dev

  四、最後生成的package.json文件大概就這樣:

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "parcel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"parcel index.html"
  },
  "keywords": [
    "parcel"
  ],
  "author": "aaron",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.2.0"
  }
}

[ ps:給npm添加啟動項:

"start":"parcel index.html"

]  

  五、最後根據官網新建index.html,index.js等文件,然後命令行打包,然後運行npm start 或 parcel index.html 啟動,簡單的demo就生成了。

  index.html / index.js / main.js / main.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Parcel</title>
</head>
<body>
<h1 class="main">parcel</h1>
<script src="./js/index.js"></script>
</body>
</html>
import main from ‘./main‘;

main();
import classes from ‘../css/main.css‘

export default ()=>{
    console.log(classes);
}
.main{
    background: url("../images/parcel.png");
    color:red;
}

  截圖:

技術分享圖片

技術分享圖片

更多

  技術分享圖片

  如果報了上面那些錯誤。貌似node.js 7.6版本以下對await / async 不支持,所以在執行打包時需要升級node.js版本。

  parcel中文官網:http://www.parceljs.io/

  parcel GitHub:https://github.com/parcel-bundler/parcel

  關於parcel的更多使用方法還需深入了解才行,每一個打包工具我都覺得都有它的獨特魅力。

  期待parcel的發展......

  

繼webpack後又一打包神器Parcel