繼webpack後又一打包神器Parcel

時間 2019-11-09

標籤 webpack 後又打包神器 parcel 简体版

原文原文鏈接

前言：

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

Parcel

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

　　快速打包html

　　　　Parcel 使用工做進程啓用多核編譯，並具備文件系統緩存，即便在從新啓動後也可快速從新構建。
　　打包全部資源
　　　　Parcel 支持JS，CSS，HTML，文件資源等等 - 不須要安裝任何插件。
　　自動轉換
　　　　在須要時，代碼使用 Babel，PostCSS 和 PostHTML 自動轉換 - 即便是 node_modules。
　　零配置代碼拆分
　　　　Parcel 使用動態 import() 語法拆分您的輸出包，因此只加載初始加載時所需的內容。
　　模塊熱替換
　　　　當你在開發過程當中進行更改時，Parcel 會自動更新瀏覽器中的模塊，不須要進行任何配置。
　　友好的錯誤記錄
　　　　遇到錯誤時，Parcel 會以語法高亮的形式打印的代碼幀，以幫助你查明問題。前端

爲啥用 parcel？

　　如今有不少Web應用程序打包工具，包括webpack 和 browserify。因此，咱們爲何還須要一個呢？主要的緣由是圍繞開發者的經驗。　vue

　　不少打包工具都圍繞配置和插件進行構建的，所以看到有500行以上配置的應用程序正常運行並不罕見。這種配置不只繁瑣和費時，並且也很可貴到正確的配置，必須爲每一個應用程序複製。一般狀況下，這可能致使次優化的應用程序發送到生產環境。parcel 被設計爲零配置：只要將它指向你的應用程序的入口點，它就能作正確的事情。
　　現有的打包工具大多都執行得慢，具備不少文件和依賴的大型應用將花費數分鐘去構建，隨着時間的推移，這將會至關痛苦的事情。監聽文件變動能幫助從新編譯，當時初始構建的時候一般仍是會很慢。parcel 利用現代的多核處理能力和工做線程去並行編譯你的代碼。這致使了初始構建的速度極大的提高。它還有一個文件系統緩存，能夠保存每一個文件的編譯結果，以便更快的後續啓動。
　　最後，現有的打包工具都是圍繞字符串加載/轉換進行構建的，其中轉換須要一個字符串，解析它，而後進行一些轉換，以後再次生成代碼。一般這最終致使許多解析和代碼生成在單個文件上運行，這是低效的。相反，parcel 的轉換工做在 AST上，因此這樣每一個文件就有一個解析，多個轉換和一個代碼生成。node

Parcel 是如何工做的？　

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

入門Demo

　　1、初始化npmgit

npm init

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

　　1.新建.babelrc 文件　web

{
  "presets": [
    "env"
  ]
}

　　2.安裝依賴vue-cli

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

　　3、添加parcel

npm install parcel-bundler --save-dev

　　4、最後生成的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"

]　　

　　5、最後根據官網新建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的發展......

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。