reactjs - 使用 create-react-app 和 Typescript 时如何在构建时加载 .md 文件？

Question

我正在尝试加载要在构建时加载的 Markdown 文件。我已经设置了一个使用 Typescript 并使用 material_ui 的 create-react-app博客主题。

import ReactMarkdown from 'markdown-to-jsx';
import post1 from './blog-post.1.md';

export default function Main(props: MainProps) {
  const classes = useStyles();
  const { posts, title } = props;

  return (
    <Grid item xs={12} md={8}>
      <Typography variant="h6" gutterBottom>
        {title}
      </Typography>
      <Divider />
      {posts.map((post) => (
        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
          {post}
        </Markdown>
      ))}
    </Grid>
  );
}

如果帖子被分配为 Markdown ，它将正确呈现: const post = '# Sample blog post #### April 1, 2020 by [Olivier](/)'所以问题是 .md 文件没有加载到变量中。
当 npm start运行，html 显示: /static/media/blog-post.1.09e7833f.md为什么会这样，文件路径中的数字是多少:09e7833f？
理想情况下，我希望在构建期间加载文件，以便在 Netlify 之类的地方更快地提供它。我不想使用像 this 这样的异步获取答案提示。
我假设我必须创建一个 webpack 加载器？问题在于 create-react-app 有 webpack.config.js在 node_modules这意味着自定义它会在新构建期间被覆盖。我不认为使用 raw-loader如果我无法配置它会有所帮助。
我也试过 import post1 from 'raw-loader!./blog-post.1.md';按照建议 here但是 Typescript 不知道该怎么做。
任何的意见都将会有帮助。

Answer 1

这似乎是之前问过的问题( https://github.com/facebook/create-react-app/issues/3025 )，但不幸的是，现在似乎不可能在 JavaScript/TypeScript 中直接将 Markdown 作为字符串导入。
询问时 create-react-app导入 md文件，它似乎获取文件的 URL(带有十六进制字符串)而不是其中包含的原始字符串。解决方法如下:

创建一个 .d.ts文件告诉 TypeScript 如何解释 md文件:

declare module '*.md' {
  const value: string; // markdown is just a string
  export default value;
}

导入您的 md文件 ( the_text.md ) 如下

import theTextFile from './the_text.md';

fetch获取实际 Markdown 的文件内容 ( https://github.com/facebook/create-react-app/issues/2961#issuecomment-322916352 )

const [postMarkdown, setPostMarkdown] = useState('');

// useEffect with an empty dependency array (`[]`) runs only once
useEffect(() => {
  fetch(theTextFile)
    .then((response) => response.text())
    .then((text) => {
      // Logs a string of Markdown content.
      // Now you could use e.g. <rexxars/react-markdown> to render it.
      // console.log(text);
      setPostMarkdown(text);
    });
}, []);

将 Markdown 文本放入 Markdown 标签中，它将呈现:

<Markdown className={classes.markdown}>
  {post}
</Markdown>

请记住，您还可以覆盖用于显示最终内容的 JSX 元素。对于 Material-UI，这可能类似于:

import { Typography } from '@material-ui/core';
import { MarkdownToJSX } from 'markdown-to-jsx';

const Foo = (): JSX.Element => {

  const MdOverrideTypography = ({
    children,
  }: // ...props
  React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLParagraphElement>,
    HTMLParagraphElement
  >): JSX.Element => (
    <Typography paragraph>
      {children}
    </Typography>
  );

  const mdOverrides: MarkdownToJSX.Overrides = {
    // "p" paragraph elements are substituted with MUI "Typography"
    p: MdOverrideTypography,
  };

  // ...

  return (
    <Markdown options={{ overrides: mdOverrides }}>
      {post}
    </Markdown>
  )
}

( https://www.npmjs.com/package/markdown-to-jsx#optionsoverrides---rendering-arbitrary-react-components )