patch-package 修复markdown链接

patch-package 基本使用

npm patch-package

npm的官方文档就说明得非常清楚了, 按照步骤操作就行了.

https://www.npmjs.com/package/patch-package?activeTab=readme

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

In package.json

 "scripts": {
+  "postinstall": "patch-package"
 }

• npm

npm i patch-package

• yarn v2+ yarn 2+ have native support for patching dependencies via yarn patch. You do not need to use patch-package on these projects.

• pnpm

pnpm has native support for patching dependencies via pnpm patch. You do not need to use patch-package on these projects.

手把手教你使用patch-package给npm包打补丁

https://juejin.cn/post/6962554654643191815

docusaurus修改markdown图片解析

• node_module代码修改

主要是让markdown image的查询路径支持从项目folder的根路径进行查询, 而不是从站点的static文件夹开始查询.

/xx/projects/playground/doctest/node_modules/@docusaurus/mdx-loader/lib/remark/transformImage/index.js

async function getImageAbsolutePath(imagePath, { siteDir, filePath, staticDirs }) {
    if (imagePath.startsWith('@site/')) {
        const imageFilePath = path_1.default.join(siteDir, imagePath.replace('@site/', ''));
        await ensureImageFileExist(imageFilePath, filePath);
        return imageFilePath;
    }
    else if (path_1.default.isAbsolute(imagePath)) {
        // Absolute paths are expected to exist in the static folder.
        const possiblePaths = staticDirs.map((dir) => path_1.default.join(dir, imagePath));
        possiblePaths.push(path_1.default.join(siteDir, imagePath));
        console.log('search path: ' + possiblePaths);
        const imageFilePath = await (0, utils_1.findAsyncSequential)(possiblePaths, fs_extra_1.default.pathExists);
        if (!imageFilePath) {
            throw new Error(`Image ${possiblePaths
                .map((p) => (0, utils_1.toMessageRelativeFilePath)(p))
                .join(' or ')} used in ${(0, utils_1.toMessageRelativeFilePath)(filePath)} not found.`);
        }
        return imageFilePath;
    }
    // Relative paths are resolved against the source file's folder.
    const imageFilePath = path_1.default.join(path_1.default.dirname(filePath), decodeURIComponent(imagePath));
    await ensureImageFileExist(imageFilePath, filePath);
    return imageFilePath;
}

• 生成 patch

npx patch-package "@docusaurus/mdx-loader"
git status
git add *
git commit -m "add markdown image absolute path support"

• 在项目文档里生成了修改的文件

.
├── patches
│   └── @docusaurus+mdx-loader+2.4.1.patch

• 生成的patch文件是 git diff 类型的文件

diff --git a/node_modules/@docusaurus/mdx-loader/lib/remark/transformImage/index.js b/node_modules/@docusaurus/mdx-loader/lib/remark/transformImage/index.js
index a0977fd..42815f5 100644
--- a/node_modules/@docusaurus/mdx-loader/lib/remark/transformImage/index.js
+++ b/node_modules/@docusaurus/mdx-loader/lib/remark/transformImage/index.js
@@ -66,6 +66,9 @@ async function getImageAbsolutePath(imagePath, { siteDir, filePath, staticDirs }
     else if (path_1.default.isAbsolute(imagePath)) {
         // Absolute paths are expected to exist in the static folder.
         const possiblePaths = staticDirs.map((dir) => path_1.default.join(dir, imagePath));
+        // 支持文件夹根路径的图片被mdx引擎识别
+        possiblePaths.push(path_1.default.join(siteDir, imagePath));
+        console.log('image search path: ' + possiblePaths);
         const imageFilePath = await (0, utils_1.findAsyncSequential)(possiblePaths, fs_extra_1.default.pathExists);
         if (!imageFilePath) {
             throw new Error(`Image ${possiblePaths

• package.json中增加patch-package依赖

  "dependencies": {
    "@docusaurus/core": "2.4.1",
    "@docusaurus/preset-classic": "2.4.1",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "patch-package": "^7.0.0"
  },

• 修改package.json增加修改步骤

在新环境安装执行npm命令的时候, 命令行日志里能看到patch-package的命令被执行.

  "scripts": {
    ...
    "start": "docusaurus start",
    "postinstall": "patch-package"
  },

• 新环境安装显示patch情况

日志里显示 Applying patches...

 npm install

> muddy@0.0.0 postinstall
> patch-package

patch-package 7.0.0
Applying patches...
@docusaurus/mdx-loader@2.4.1 ✔