Parcel極速零配置Web應用打包工具

時間 2019-11-12

標籤 parcel 配置 web 應用打包工具欄目 HTML 简体版

原文原文鏈接

當聽到極速零配置打包，我不經興奮起來，零配置！！！想起在webpack打包的配置，這個零配置着實讓我好奇不已，迅速學習一波。css

Parcel（parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl]）有如下幾大特色：html

極速打包。Parcel使用 worker 進程去啓用多核編譯。同時有文件系統緩存，即便在重啓構建後也能快速再編譯。
將你全部的資源打包。Parcel 具有開箱即用的對 JS, CSS, HTML, 文件及更多的支持，並且不須要插件。
自動轉換。如如有須要，Babel, PostCSS, 和PostHTML甚至 node_modules 包會被用於自動轉換代碼。
零配置代碼拆分。使用動態 import() 語法, Parcel 將你的輸出文件束(bundles)分拆
自動熱更新。在你更新代碼保存以後，在瀏覽能夠當即獲得更新。
友好的錯誤日誌體驗。當遇到錯誤時，會語法高亮代碼片斷

瞭解了Parcel的這些特性以後，接下來開始搞起吧。node

首先經過yarn或者npm安裝Parcel：webpack

Yarn：ios

yarn global add parcel-bundler

npm：git

npm install -g parcel-bundler

而後在本身建立的項目目錄下建立一個package.json文件：github

npm init

Parcel 可使用任何類型的文件做爲入口，可是最好仍是使用 HTML 或 JavaScript 文件。若是在 HTML 中使用相對路徑引入主要的 JavaScript 文件，Parcel 也將會對它進行處理將其替換爲相對於輸出文件的 URL 地址。web

接下來，建立一個index.html 和 index.js 和 main.css文件。npm

//index.html <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parcel</title>
</head>
<body>
    <div class="main">
　　　　<div class="box"></div>
　　</div>
    <script src="./index.js"></script>
</body>
</html>

//index.js

import './main.css'

console.log("hello world");

//index.css .main{ width: 400px; height: 400px; background-color: red;
}

Parcel 內置了一個當你改變文件時可以自動從新構建應用的開發服務器，並且爲了實現快速開發，該開發服務器支持熱模塊替換。只須要在入口文件指出：json

parcel index.html

如今在瀏覽器中打開 http://localhost:1234/，就能夠看到效果。而且在目錄中會看到打包的文件都在dist/目錄下：

若是你想使用本身的端口去覆蓋默認端口，也可使用 -p <port>選項覆蓋默認的端口，好比：

parcel index.html -p 3000

控制檯就會出現以下：

當須要綁定應用程序的時候，你可使用 Parcel 的生產模式。

parcel build  index.html

這將關閉監聽模式和熱模塊替換，因此它只會編譯一次。它還會開啓 minifier 來減小輸出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 terser ，CSS 的 cssnano 還有 HTML 的 htmlnano。

JavaScript 文件或 HTML 文件都能導入 CSS 資源，而且能經過 @import語法引用依賴，還能經過 url() 函數引入圖片，字體等。其餘經過 @import 導入的 CSS 文件被內聯到同一個CSS包裏，並將 url()引用重寫爲其輸出文件名。全部文件名都應該與當前 CSS 文件相關聯。

建立other.css

.box{ width: 200px; height: 200px; background-color: green;
}

以後在main.css中引入

@import './other.css'; .main{ width: 400px; height: 400px; background-color: red;
}

除了普通的 CSS，其餘的 LESS，SASS，以及 Stylus 等CSS預處理器語言也是支持的，而且執行方法是與之相同的。下面以scss爲例。編譯scss須要 node-sass模塊. 經過 npm 安裝它：

npm install --save-dev node-sass

一旦安裝了 node-sass，你就能夠在 JavaScript 文件中引入 SCSS 文件。

import './hello.scss'

SCSS 文件中的依賴可使用 @import 語句。

許多打包工具須要你安裝和配置插件來轉換資源，Parcel 支持許多開箱即用的轉換器和內置的編譯器。您可使用 Babel 轉換 JavaScript ，使用 PostCSS 轉換 CSS ，使用 PostHTML 轉換 HTML。Parcel 在模塊中找到配置文件 (例如 .babelrc ，.postcssrc) 時會自動運行並進行轉換。

Babel 是一個流行的 JavaScript 轉換器，擁有大型的插件生態系統。Babel 與 Parcel 一塊兒使用的方式與單獨使用或與其餘打包工具一塊兒使用的方式相同。先在應用程序中安裝presets 和 plugins:

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

而後，建立一個文件 .babelrc：

{ "presets": ["env"] }

PostCSS 是一個使用插件轉換 CSS 的工具，例如 autoprefixer，cssnext 以及 CSS Modules 。你可使用這些名稱之一建立配置，從而達到使用 Parcel 配置 PostCSS 的目的：.postcssrc(JSON)，.postcss.js，或 postcss.config.js。

先安裝plugins:

npm install --save-dev postcss-modules autoprefixer

而後，建立一個文件 .postcssrc：

{ "modules": true, "plugins": { "autoprefixer": { "grid": true } } }

Plugins 在 plugins 對象中被指定爲 key，並使用對象的值定義選項。若是插件沒有選項，只需將其設置爲 true便可。

Parcel 在生產環境構建時，會使用 cssnano 來壓縮 css 文件。能夠建立一個 cssnano.config.js文件來進行詳細的壓縮配置：

module.exports = { calc: false, discardComments: { removeAll: true, } };

在咱們熟悉了使用npm run dev來開啓一個服務以後，不免也想用這個方法。首先咱們安裝依賴：

npm install --save-dev parcel-bundler

而後向package.json 的 scripts 中添加 start 腳本。

// package.json
"scripts": { "start": "parcel index.html" }

以後使用npm run start就能夠開啓服務了。

附上git地址：https://github.com/parcel-bundler/parcel

中文網： https://zh.parceljs.org/

相關標籤/搜索

每日一句

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