Ссылка на проект Typescript вне исходной папки

Question

У меня есть 2 CRA-проекта в моно-репо - P1 и P2.

root/
  projects/
    p1/
      package.json
      tsconfig.json
      src/
        shared/
          **/*.ts
    p2/
      package.json
      tsconfig.json
      src/
        **/*.ts

P1 содержит некоторые исходные файлы общей инфраструктуры, которые я хочу использовать в P2.

Примечание: Я знаю о недостатках и недостатках этого подхода, но ...

То, что я пробовал:

1. Включить P1 из P2 и импорт:

   • P1 tsconfig.json, модифицированный

     "include": [..., "root/projects/p1/src/shared/**/*.ts]

   • P2 исходный файл импортирует .ts файлы по относительному пути

   Результат:

   You attempted to import <path> which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
   You can either move it inside src/, or add a symlink to it from project's node_modules/
   

2. Использование рабочих областей пряжи

   Это легко. Пряжа не позволяет иметь рабочие пространства вне проекта root

   You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.

3. Typescript 3.0+ ссылки на проекты:

   • Обновление p1 tsconfig.json с

   "compilerOptions": { "composite": true }

   • Добавить ссылку на P1 tsconfig.json

   references: [ { "path": "{...}/p1/" ]

   • Сборка P1 с tsc -b для создания файлов объявлений

   • теперь мне нужно как-то импортировать его.

     • создать tsconfig.paths.json в настроить paths раздел

     • добавить rootDir tp P1 tsconfig.json, чтобы указать root/ папку

     • добавить пути "@lib/*": ["<relative-path-to-p1>/p1/src/shared/*"]

   Результат:

   Cannot find module: '@lib/....'. Make sure this package is installed

   Также я вижу, что VSCode правильно распознает мою конфигурацию и import intellisense работает правильно

4. Использование react-app-rewired

   в моем config-overrides.js Я добавил что-то вроде

   module.exports = function override(config, env) {
     config.resolve.alias = {
       "@lib": path.resolve(__dirname, '...p1/src/shared/')
     }
   }
   

   Это работает для всех псевдонимов внутри проекта. Но в моем случае это не с

   You attempted to import <root>/p1/src/shared... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
   You can either move it inside src/, or add a symlink to it from project's node_modules/
   

Answer 1

1. Добавить customize-cra и react-app-rewired пакеты

2. Добавить к ссылке tsconfig.json:

{
  "compilerOptions": {
    ...
    "composite": true,
    "declaration": true,
    "declarationMap": true
}

Создать tsconfig.paths.json в базовом проекте

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@alias/*": ["..relative/to/base/url/path/*"]
    }
  }
}

В tsconfig.json добавить такие строки:

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "<the same value as in paths file>"
  },
  "references": [
    { "path": "../relative/path/to/referenced/project/tsconfig.json/file" }
  ]

Создать config-override.js файл в проекте root

const { override, removeModuleScopePlugin, getBabelLoader, addWebpackAlias } = require("customize-cra");
const path = require("path");
const fs = require('fs');

const updateAliases = (config) => {
  const aliases = {
    "@alias": ["absolute/path/to/base/url"]
  };

  return addWebpackAlias(aliases)(config);
};

const updateIncludes = (config) => {
  const loader = getBabelLoader(config, false);
  const commonPath = path.normalize(path.join(process.cwd(), "../relative/path/to/referenced/project/tsconfig.json/file")).replace(/\\/g, "\\");
  loader.include = [loader.include, commonPath];
  return config;
};

module.exports = override(
  updateAliases,
  updateIncludes,
  removeModuleScopePlugin()
);

Используйте react-app-rewired вместо react-scripts в package.json

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

Answer 2

Итак, я не знаю, является ли это «правильным» способом или нет, но я делал это раньше, используя средство наблюдения за файлами (watchman, gulp, et c.) Для синхронизации c файлов из Проект B в общую папку в проекте A.

При использовании этого подхода обязательно .gitignore скопированные файлы.

Проект A
| _ пакет. json
| _ sr c
.. | _ index.ts
.. | _ shared
..... | _ someSharedFile.ts

Проект B
| _ gulpfile. js
| _ sr c
... | _ someSharedFile.ts

https://css-tricks.com/gulp-for-beginners/

-

Другой альтернативой может быть создание пакета NPM из проекта B и установка его в проект A.