Parceljs / PostHTML - 防止 .htm 文件被重命名为 .html
Parceljs / PostHTML - keeping .htm files from being renamed to .html
通过 parcel .htm 文件构建时,输出为 .html 文件。
我更愿意将 .htm 文件保留为输出文件,但无法找到在 parcel 或 Parcel 使用的 PostHTML 中执行此操作的方法。
我更新了一个旧的静态网站以使用 Parcel 作为构建工具。
所有网站文件的文件扩展名为.htm。
我遇到一个问题,目前 parcel 自动将所有 .htm 文件重命名为 .html,并且还自动将所有内部链接更新为 .html
目前这是一个问题,因为该站点在搜索引擎上以 .htm 文件后缀编入索引,因此我目前要么需要保留两个副本,要么为每个 .htm 文件执行重定向。
我认为 parcel v2 不支持开箱即用,但可以通过自定义 namer plugin
相对轻松地完成
下面是一些有效的代码:
import { Namer } from "@parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "html") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.htm`;
}
}
// Returning null means parcel will keep the name of non-html bundles the same.
return null;
},
});
在不发布单独包的情况下将此插件与 parcel 挂钩的最简单方法是使用 yarn's link protocol。
你会像这样构建你的项目:
project
├── .parcelrc
├── package.json
├── src
│ └── index.html
└── parcel-namer-htm
├── package.json
└── src
└── HtmNamer.js <-- the code above
您的主 package.json
将 link 到您的 parcel-namer-htm
文件夹,如下所示:
{
"name": "my-project",
"dependencies": {
"parcel": "^2.0.0",
"parcel-namer-htm": "link:./parcel-transformer-foo"
}
}
您的 .parcelrc
文件将如下所示:
{
"extends": "@parcel/config-default",
"namers": ["parcel-namer-htm", "..."]
}
parcel-namer-htm/package.json
看起来像这样:
{
"name": "parcel-namer-htm",
"main": "src/HtmNamer.js",
"engines": {
"node": ">= 12.0.0",
"parcel": "^2.0.0"
},
}
通过 parcel .htm 文件构建时,输出为 .html 文件。 我更愿意将 .htm 文件保留为输出文件,但无法找到在 parcel 或 Parcel 使用的 PostHTML 中执行此操作的方法。
我更新了一个旧的静态网站以使用 Parcel 作为构建工具。 所有网站文件的文件扩展名为.htm。
我遇到一个问题,目前 parcel 自动将所有 .htm 文件重命名为 .html,并且还自动将所有内部链接更新为 .html
目前这是一个问题,因为该站点在搜索引擎上以 .htm 文件后缀编入索引,因此我目前要么需要保留两个副本,要么为每个 .htm 文件执行重定向。
我认为 parcel v2 不支持开箱即用,但可以通过自定义 namer plugin
相对轻松地完成下面是一些有效的代码:
import { Namer } from "@parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "html") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.htm`;
}
}
// Returning null means parcel will keep the name of non-html bundles the same.
return null;
},
});
在不发布单独包的情况下将此插件与 parcel 挂钩的最简单方法是使用 yarn's link protocol。
你会像这样构建你的项目:
project
├── .parcelrc
├── package.json
├── src
│ └── index.html
└── parcel-namer-htm
├── package.json
└── src
└── HtmNamer.js <-- the code above
您的主 package.json
将 link 到您的 parcel-namer-htm
文件夹,如下所示:
{
"name": "my-project",
"dependencies": {
"parcel": "^2.0.0",
"parcel-namer-htm": "link:./parcel-transformer-foo"
}
}
您的 .parcelrc
文件将如下所示:
{
"extends": "@parcel/config-default",
"namers": ["parcel-namer-htm", "..."]
}
parcel-namer-htm/package.json
看起来像这样:
{
"name": "parcel-namer-htm",
"main": "src/HtmNamer.js",
"engines": {
"node": ">= 12.0.0",
"parcel": "^2.0.0"
},
}