Parcel 與 HTML

2020-02-14 17:15 更新

HTML

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

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

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

    <!-- 導(dǎo)入一個(gè)JavaScript包 -->
    <script src="./index.js"></script>
  </body>
</html>

導(dǎo)入未編譯的資源

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

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

PostHTML

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

安裝插件：

yarn add posthtml-img-autosize

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

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

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

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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號