在 Gatsby / React 中将文件作为字符串（或源资产）导入

Question

我想将 .ts、.tsx、.js 和 .jsx 文件导入到 React 组件中，并在 PrismJS 突出显示块中呈现它们。例如，假设我有一个带有 functionA 的 TypeScript 文件，我想在我的实际网站中突出显示：

functionA.ts:

export function functionA() {
    console.log("I am function A!");
}

我想将其包含在不同的组件中。问题是，当我导入它时，我显然是在导入它的 webpack 模块版本。我试图让我的函数在反应组件中呈现的弱尝试看起来像这样：

MyComponent.tsx:

import * as React from "react"
import { functionA } from "./functionA"

export function MyComponent() {
    return (
        <>
            <h1>Here is your code block:</h1>
            <pre>
                <code>
                    {functionA.toString()}
                </code>
            </pre>
        </>
    )
}

在代码块所在的页面上实际呈现的内容将如下所示：

Here is your code block:

WEBPACK__IMPORT.functionA() {
    console.log("I am function A!")
}

我不记得 .toString() 函数的输出是什么样子的，但关键是它不仅仅是文件的内容，例如它在代码编辑中的显示方式 - 它已被模块化通过 WebPack。

那么，在 Gatsby 项目中，我怎样才能将这些不同的代码片段直接作为字符串导入，完全按照它们的编写方式，而无需 WebPack 在其上执行导入内容？是否有插件或某种方式告诉 Webpack 使用导入的文件作为其 asset/source 模块类型？我知道 MD 或 MDX 文件有 gatsby-remark-embed-snippet，但我正在构建基于组件的 HTML 页面，不能使用 MD 或 MDX 文件！

时间已经很晚了，也许我只是见树不见林，我知道一定有办法做到这一点...

Answer 1

您需要 require 使用 webpack 的 raw-loader 文件，即：

const functionA = require("!!raw-loader!./functionA");

这适用于 create-react-app、，这也适用于 Gatsby！

在这样的文件上使用 require 后，文件内容可以在组件中呈现为：

<pre>{functionA.default.toString()}</pre>

然后由您使用 prism 或类似工具添加语法突出显示。

请注意，此解决方案仅在 Gatsby V3 继续使用 WebPack v4 时有效，因为 raw-loader 在 WebPack v5 中已弃用，并且将逐步淘汰 asset/source 类型的模块。

在 Gatsby / React 中将文件作为字符串（或源资产）导入

Import a file as a string (or source asset) in Gatsby / React

reactjs

webpack

module

embed