Parcel 與 HTML

2020-02-14 17:15 更新

HTML

HTML 資源經常被用來當做入口文件提供給 Parcel，但也可以被 JavaScript 文件引用，如提供一個鏈接到其他頁面。通過 URL 鏈接的腳本、樣式、媒體資源和其他 HTML 文件都會被提取和編譯。在 HTML 中的鏈接將被重寫成正確的輸出文件地址。所有的文件名路徑都應該相對于當前的 HTML 文件。

<html>
  <body>
    <!-- 引入一個文件 -->
    <img src="./images/header.png" />

    <a href="./other.html">Link to another page</a>

    <!-- 導入一個JavaScript包 -->
    <script src="./index.js"></script>
  </body>
</html>

導入未編譯的資源

在 HTML 文件中添加的鏈接都將被 Parcel 編譯（例如：JavaScript, TypeScript, SCSS 等）。Parcel 會自動處理這些資源并更新鏈接指向編譯后的資源。

<html>
  <head>
    <!-- 包含一個 SCSS 文件 -->
    <link rel="stylesheet" href="./my-styles/style.scss" />
  </head>
</html>

PostHTML

PostHTML是一個通過各類插件轉換 HTML 的工具。在 Parcel 中通過創(chuàng)建一個名字為.posthtmlrc (JSON), .posthtmlrc.js, 或 posthtml.config.js的配置文件來配置它。

安裝插件：

yarn add posthtml-img-autosize

創(chuàng)建一個.posthtmlrc文件

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    },
    "posthtml-modules": {
      "root": "./src"
    }
  }
}

在plugins對象中 key 指定插件，values 以對象形式被用來定義該插件的配置選項。如果這個插件沒有配置，value 設置為true

配置了posthtml-modules后，導入的模塊以/路徑開始將變成相對路徑./src


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號