Совместное использование кода между проектами с использованием TypeScript и веб-пакета

Question

Я хочу поделиться кодом между двумя проектами TypeScript.Я не хочу публиковать общий код в NPM - просто хочу поместить общий код в один проект и использовать его в другом проекте.Я использую Webpack и awesome-ts-loader .Текущая структура папок (упрощенная) выглядит следующим образом:

/devroot/
  mainProject/
    tsconfig.json
    src/
      shared/
        SomeSharedTypes.ts
  apiProject/
    tsconfig.json
    webpack.config.js
    src/
      UseSomeSharedType.ts

В UseSomeSharedType.ts я хочу иметь возможность импортировать типы из SomeSharedTypes.ts.

Я попробовал очевидное решение, подобное этому:

import {SharedType} from '../../mainProject/src/shared/SomeSharedTypes'

Но компилятор TS дал мне эту ошибку:

TS6059: Файл '/devroot/mainProject/src/shared/SomeSharedTypes.ts' не находится под 'rootDir'/ devroot / apiProject'.Предполагается, что rootDir содержит все исходные файлы.

Answer 1

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

import {SharedType} from '@foo/SomeSharedTypes'

Используя методы, описанные в статье, я добавил конфигурацию paths в свой tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@foo/*": ["../mainProject/src/shared/*"],
    },
    "rootDir": "./",
    ...
  }
}

Затем, опять же, как рекомендует статья, для пользователей awesome-typescript-loader мне пришлось изменить свой webpack.config.js, чтобы добавить плагин разрешения:

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
. . .
  resolve: {
    extensions: ['.js', '.json', '.ts'],
    plugins: [
      new TsConfigPathsPlugin(),
    ],
  }

Важно: этот плагин должен войти в resolve/plugins раздел файла, а не корневой раздел "plugins"!Если вы поместите плагин распознавателя не в то место, вы получите эту ошибку:

resolver.ensureHook не является функцией

Шаги, приведенные выше, продвинули меня дальшев процессе - TypeScript теперь смог найти мои файлы! - но я все еще получил ту же ошибку позже при выполнении веб-пакета: 'rootDir' is expected to contain all source files.

После гораздо большего количества поиска в Google, я нашел решение в этот ответ StackOverflow : вместо одной конфигурации rootDir TS имеет настройку rootDirs, которая допускает наличие нескольких корней.Я удалил свою настройку rootDir из tsconfig.json и добавил настройку rootDirs:

"rootDirs": [
  "./",
  "../mainProject",
],

Затем я столкнулся с ошибкой веб-пакета в файле TypeScript другого проекта, который я включал:

Ошибка синтаксического анализа модуля: неожиданный токен (3:15)

Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

После еще одного часа устранения неполадок,Я понял, что мне нужно рассказать загрузчику webpack о моей новой общей папке.Вот так:

const path = require('path');
. . .
  rules: [
    {
      test: /\.[jt]sx?$/,
      loader: "awesome-typescript-loader",
      include: [
        __dirname,
        path.resolve(__dirname, "../mainProject/src/shared/")
      ],
      exclude: /node_modules/
    },

Это сработало!Приятной частью этого решения является то, что я могу реорганизовать структуру папок без изменения исходного кода.Все, что мне нужно изменить, это tsconfig.json и webpack.config.js.

По общему признанию, я новичок в использовании webpack и TypeScript, поэтому может быть лучшее решение, чем приведенное выше ... но приведенное выше сработало для меня!

Поделиться решением здесьсделать так, чтобы следующий разработчик нашел его.