Parceljs配置

Question

我在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文件？

Answer 1

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

它可能需要在项目根目录(假设是src文件夹)中包含以下.posthtmlrc文件：

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

Answer 2

.posthtmlrc似乎没有为我做任何事情。

下面是我是如何做到的：

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

在地块项目的顶层创建一个名为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>