如何将文件导入到使用 create react app 作为原始文本的 react 应用程序？

Question

目标

我想显示一些代码以供项目本身参考。
我希望代码的显示随着实现而更新。
我不想从 create-react-app

这个使用 create-react-app 和打字稿创建的 React 项目将用于显示一些自定义组件，以便在其他项目中重复使用。我的目标是让组件紧挨着使用它的代码使用。

如果我无法访问 webpack 配置并且无法使用 fs.readFile，我该如何加载文件？

Answer 1

我四处看看后设法使它工作。有两个主要部分必须到位才能使其正常工作。

使用合适的加载程序

在这种情况下，我想使用 raw-loader，因此我将其安装为开发依赖项。 yarn add -D raw-loader.

为了实际导入文件，我需要像这样覆盖 webpack 配置：

// eslint-disable-next-line import/no-webpack-loader-syntax
import toolbarItems from '!!raw-loader!../ToolbarItems';

这会将整个文件加载到变量 toolbarItems 中。通过在加载器之前使用 !! ，我可以防止任何其他 webpack 加载器在这种特定情况下处理它。这可能在一个普通的 javascript 项目中单独工作，但在打字稿中...

您必须为 typescript 提供一个模块

我运行打字错误：

Failed to compile.

/Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx
TypeScript error in /Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx(9,26):
Cannot find module '!!raw-loader!../ToolbarItems'.  TS2307

     7 |
     8 | // eslint-disable-next-line import/no-webpack-loader-syntax
  >  9 | import toolbarItems from '!!raw-loader!../ToolbarItems';
       |                          ^
    10 |
    11 | const useStyles = makeStyles({
    12 |   root: {

在名为 ToolbarItems.ts.d.ts 的文件中简单地为加载器声明一个模块解决了我的问题：

declare module '!!raw-loader!*' {
  const content: string;
  export default content;
}

source

Answer 2

由于您在项目中使用了 create-react-app，目前最好的解决方案是一个名为 Raw.Macro.

的 babel 插件

此插件允许您访问文件内容而无需 create-react-app 弹出。提供真正优雅的解决方案，没有任何样板代码，也没有像以前的答案那样声明“d.ts”文件。

注意：有一个小缺点，当文件更改时，您必须重新启动 webpack 开发服务器，因为文件的内容是在构建过程中嵌入的。

import raw from 'raw.macro';

function foo(){
    const jsonContent = raw('../utils/stops.json');
    console.log(jsonContent);
}

如何将文件导入到使用 create react app 作为原始文本的 react 应用程序？

How to import a file into a react app that uses create react app as raw text?

typescript

reactjs

create-react-app

目标

使用合适的加载程序

您必须为 typescript 提供一个模块