reactjs - 在 Gatsby/React 中将文件作为字符串(或源 Assets )导入

Question

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

functionA.ts:

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

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

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

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

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

这适用于 create-react-app，as in the solution discussed here ，这也适用于 Gatsby!

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

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

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

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