Parceljs 配置答案

【问题标题】：Parceljs configurationParceljs 配置
【发布时间】：2019-10-14 20:40:08
【问题描述】：

我在 index.html 中导入 html 文件时遇到问题。

我的 package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "del": "^3.0.0",
    "i": "^0.3.6"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.3"
  },
  "scripts": {
    "start": "parcel src/pages/index.html"
  }
}

My project structure

我尝试像这样在 index.html 中包含 header.html，但没有成功。 <include src="src/pages/templates/header.html"></include>

如何在 index.html 页面上包含 html 文件？

【问题讨论】：

标签： web frontend bundler parceljs

【解决方案1】：

试试这个插件：https://github.com/posthtml/posthtml-modules。

它可能需要您的项目根目录中的以下.posthtmlrc 文件（假设是src 文件夹）：

{
  "plugins": {
    "posthtml-modules": {
      "root": "src"
    }
  }
}

【讨论】：

posthtml-modules 和 posthtml-include 有什么区别？

【解决方案2】：

.posthtmlrc 似乎对我没有任何帮助。

我是这样做的：

安装posthtml-include:npm i posthtml-include --save-dev

在 Parcel 项目的顶层创建一个名为 posthtml.config.js 的文件：

module.exports = {
  plugins: [
    require('posthtml-include')({
      root: `${__dirname}/partials` // "partials" can be renamed
    })
  ]
};

然后创建一个./partials 文件夹，其中包含一个HTML 文件。要包含它，请使用以下语法：

<h1>Welcome</h1>
<include src="test.html"></include>

【讨论】：