Проект NPM Workspace с Vite, устраняющий необходимость в папке dist в сборке Vite

У меня есть проект с модулем, который использует экспорт полного пути, а не индексные файлы.

Проект состоит из 2 рабочих пространств NPM. Одно есть core другое examples.

Проблема, которую я пытаюсь избежать, заключается в том, что путь импорта выглядит так: @my-project/core/dist/plugins/Input

Проблема, с которой я столкнулся, заключается в том, что мне удалось заставить Typscript построить выходные данные так, что TypeScript может компилироваться без необходимости иметь dist в пути, однако Vite не будет собирать, поскольку утверждает, что не может найти соответствующий код.

Error: [vite]: Rollup failed to resolve import "@my-project/core/plugins/Input"

Машинописный текст работает нормально, что было проблемой, но, похоже, это было исправлено путем добавления следующего в мой package.json

"typesVersions": {
    "*": {
      "*": [
        "./dist/*"
      ]
    }
  },

Я предполагаю, что это что-то особенное для моей конфигурации Vite, которая выглядит так:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        // Use React plugin in all *.jsx and *.tsx files
        include: '**/*.{jsx,tsx}',
      }),
    ],
    server: {
      port: 3000,
      host: true,
    },
    preview: {
      port: 4000,
    },
  };
});

Я сводил себя с ума, пытаясь реализовать множество разных способов, и теперь я на полпути к компиляции TypeScript. Я надеюсь, что кто-нибудь сможет указать на простую, надеюсь, ошибку, которую я совершаю, чтобы Vite тоже работал.


1
169
1

Ответ:

Решено

Попробуйте указать пути экспорта в package.json пакета, который вы хотите импортировать. Что-то вроде этого:

{
  "name": "@my-project/core",
  ...
  "exports": {
    ".": "./dist/index.js",
    "./plugins/Input": "./dist/plugins/Input",
  }
}

Затем вы сможете импортировать подпапку следующим образом:

import { stuff } from '@my-project/core/plugins/Input'

Стоит отметить, что если этот пакет предназначен для публичного использования, вы можете добавить пути экспорта ESM и CJS для создания обоих наборов выходных данных:

        ".": {
            "import": "./dist/index.js",
            "require": "./dist/cjs/index.cjs"
        },

Дай мне знать, как твои дела!


Интересные вопросы для изучения

Ошибка клерка: тип UserResource из useUser() и @clerk/types не совпадаютОшибка TS2769: никакая перегрузка не соответствует этому вызову с использованием scan() из RXJS Angular 17Реакция useState на пользовательский крючок игнорирует предоставленное начальное состояниеПочему Rxjs switchMap выводит только последнее значение из наблюдаемого источника of()?Есть ли способ использовать npm с прямым исходным кодом, а не с минимизированным/связанным кодом?Есть ли способ использовать npm с прямым исходным кодом, а не с минимизированным/связанным кодом?Пользовательские фрагменты в AstroJSКак использовать частный пакет и общедоступный пакет npm в качестве прокси с помощью AWS CodeartifactПолучение npm ERR! код ENOMEM при попытке установить npm в проекте ремиксаПытаюсь разместить проект Flutter через Firebase, но при использовании Flutterfire он возвращает исключение Formate, как мне решить эту проблему?