Как импортировать файл в приложение реакции, которое использует приложение для создания реакции в виде необработанного текста?

Question

Цели

1. Я хочу показать код для справки из самого проекта.
2. Я хочу, чтобы отображение кода обновлялось при реализации.
3. Я не хочу извлекать из create-react-app

Этот реактивный проект, созданный с create-react-app и машинописным шрифтом, будет использоваться для отображения некоторых пользовательских компонентов для повторного использования в других проектах. Моя цель - использовать компонент рядом с кодом, который его использует.

Как загрузить файл, если у меня нет доступа к конфигурации веб-пакета, и я не могу использовать fs.readFile * * 1016

Answer 1

Мне удалось заставить это работать после небольшого осмотра. Есть две основные части, которые должны были быть на месте, чтобы заставить его работать.

Используйте соответствующий загрузчик

В этом случае я хотел использовать raw-loader, поэтому я установил его как зависимость от разработчика. yarn add -D raw-loader.

Для того, чтобы фактически импортировать файл, мне нужно было переопределить конфигурацию веб-пакета следующим образом:

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

Это загружает весь файл в переменную toolbarItems. Используя !! перед загрузчиком, я не позволяю другим загрузчикам веб-пакетов обрабатывать его в этом конкретном случае c. Это может работать само по себе в простом javascript проекте, но в машинописи ...

Вы должны предоставить модуль для машинописи

Я столкнулся с ошибкой машинописи:

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