Как импортировать общий машинописный код с помощью create-реагировать-приложение (без извлечения)?

Question

Я пытаюсь добиться совместного использования кода TypeScript в приложении create-реагировать в приложении без режима извлечения, но я сталкиваюсь с печально известным ограничением, что импорт за пределами src не разрешен:

You attempted to import ../../common/src/lib.ts which falls outside of the project src/ directory. [...]

Для случая без TypeScript это было задано и получено ответом , но я не могу получить ни одно из решений для работы с TypeScript , В частности, проблемы с предлагаемыми решениями:

• Настройка baseDir в ts-config.json: здесь create-реакции-приложение жалуется: Ваш проект baseUrl может быть только установите src или node_modules. Приложение «Создать React» в настоящее время не поддерживает другие значения.

• Подходы, основанные на перереагировании приложения-приложения: Более многообещающие. Отключение ModuleScopePlugin устраняет ошибку «попытка импорта вне sr c», но теперь проблема в том, что загрузчик файлов машинописного текста не проигрывается:

  

  Я убедился, что с самим .ts все в порядке: копирование в ./src и импорт из него работает нормально.

  Я также добавил папку ../../common/src в includes список в ts-config.json.

  Я предполагаю, что в конфигурации загрузчика веб-пакетов есть правило, запрещающее загрузчику TypeScript передавать файлы, которые не соответствуют ожидаемым шаблонам пути. Как это можно исправить с помощью response-app-rewired?

• Символьные источники тоже не работают - опять же с той же проблемой. Вероятно, потому что webpack внутренне разрешает символические ссылки и видит файл в пути, где обычные правила загрузчика не применяются.

• Решения на основе извлечения: я бы не хотел сейчас извлекать, но я попытался, и я в основном снова сталкиваюсь с той же проблемой.

Я также нашел другие вопросы, которые звучали как связанные, но не ответили на проблему:

• Создание приложения React + Typescript При совместном использовании кода monorepo : звучит в основном как тот же вопрос, но это не так, потому что он запрашивает случай выброса приложения React.
• Совместное использование кода между проектами с использованием TypeScript и веб-пакета : также решает проблему совместного использования кода, но не спецификацию create-реагировать на приложение c, и я не знаю, можно ли перенести решение в create- response-app, потому что для этого требуется ручное управление конфигурацией веб-пакета.

---

Повторное использование типографий TypeScript в моно-репо представляется довольно разумным примером. Я что-то упустил или почему приложение create-реакции-приложение делает это настолько трудным?

---

Воспроизвести: мой код в основном на 100% состоит из того, что вы получаете с

npx create-react-app my-app --template typescript

с добавлен один импорт во внешний.

Answer 1

вопрос, где живет ../../common/src/mymodule? это другой проект? Если это другой проект, почему бы вам не связать их

• внутри общего кода проекта, запустите npm link

• внутри проекта, который будет использовать общий код: npm link common-project

Если нет двух разных проектов. почему он должен находиться за пределами sr c?

Ссылка, которую вы разместили Приложение create-реагировать на импорт импортирует ограничение вне каталога sr c , и ваша проблема / проблема две совершенно разные вещи, плюс они так сильно спотыкаются позвольте мне рассказать вам и об этой проблеме, и о вашей.

Как мы уже знаем, CRA создает одностраничное приложение SPA. это означает, что существует только один файл html. все происходит в index.html, который расположен в <project>/public/index.html. Если мы скомпилируем код, то заметим, что конечный пакет может выглядеть примерно так:

build
--static
----js
----css
----media
--index.html
--...more hashed crap...
public
src

и по умолчанию process.env.PUBLIC_URL имеет значение "/" ЧТО ?? Look да смотри, позволь мне показать тебе. есть старая поговорка, картинка объясняет более 1000 слов.

, если мы посмотрим на изображение, которое согласно его пути находится в ./src/styles/imageSlack.jpg или около того. Так что, если мы утешаемся?. 1034

WHAAAT !! где они это делают? одна вещь, которую вы можете сделать, чтобы проверить мою теорию, это если вы console.log(process.env.PUBLIC_URL) где-нибудь в своем коде. теперь вот большая разница между этим и этим.

Браузеры изначально не знают Typescript.

Так что либо вы устанавливаете код yow внутри src, и мы заканчиваем счастливым, либо следуем за отдельными проблемами принцип и мы создаем пакет npm с общим кодом и просто импортируем как любой другой модуль.

Answer 2

После долгих часов экспериментов и чтения проблем GitHub у меня наконец-то есть рабочее решение. Большое спасибо BirukDmitry, который сделал этот очень полезный пост на GitHub . Пошаговое руководство:

1. Установите ответ-приложение-перемонтировано и настройте-cra

   npm i react-app-rewired customize-cra --save-dev
   

2. Настройте реагирование-приложение-перезапись с минимальным значением config-overrides.js, например:

   const { removeModuleScopePlugin, override, babelInclude } = require("customize-cra");
   const path = require("path");
   
   module.exports = override(
     removeModuleScopePlugin(),        // (1)
     babelInclude([
       path.resolve("src"),
       path.resolve("../common/src"),  // (2)
     ])
   );
   

   Параметр (1) аналогичен тому, что необходимо для обхода ограничения import-outside-sr c в целом (см. связанный вопрос ).

   Параметр (2) имеет решающее значение, хотя для включения трансплантации бабел (и, таким образом, включая удаление типа TS, я полагаю) также и для других путей. Это то место, куда вы должны добавить свои пути, из которых вы хотите импортировать.

3. Адаптации для tsconfig.json.

4. не требуются. используя относительные пути, например, import * as mymodule from '../../common/src/mymodule'.