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

【问题标题】：Import a file as a string (or source asset) in Gatsby / React在 Gatsby / React 中将文件作为字符串（或源资产）导入
【发布时间】：2021-03-28 00:38:36
【问题描述】：

我想将 .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 项目中，我怎样才能让这些不同的代码 sn-ps 直接作为字符串导入，纯粹按照它们编写的那样，而不需要 WebPack 在其上执行其导入内容？是否有插件或某种方式告诉 Webpack 使用导入的文件作为其 asset/source 模块类型？我知道 MD 或 MDX 文件有 gatsby-remark-embed-snippet，但我正在构建一个基于组件的 HTML 页面，不能使用 MD 或 MDX 文件！

已经很晚了，也许我只是从树上看不到森林，我知道一定有办法做到这一点......

【问题讨论】：

标签： reactjs webpack module embed

【解决方案1】：

你需要使用webpack的raw-loaderrequire文件，即：

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

这适用于create-react-app、as in the solution discussed here，这也适用于盖茨比！

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

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

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

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

【讨论】：