Проект 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 тоже работал.

Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
0
169
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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"
        },

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

Это именно то, что мне нужно. Я беспрекословно верил, что экспорт будет рут и оттуда всё будет работать. Я не считал, что мне нужен каждый путь. Я очень ценю это простое решение и по ходу дела кое-что узнал... Спасибо! Что касается ``` ".": { "import": "./dist/index.js", "require": "./dist/cjs/index.cjs" }, ``` Должно ли это быть сделано для каждый из экспортированных путей?

IanelGreenleaf 10.05.2024 00:51

Нет проблем, пожалуйста, проголосуйте также, если это правильно! Should this be done for each of the exported paths?: Да, если вы хотите предоставить в своем пакете как CommonJS, так и ESM, вам необходимо указать путь к каждому ресурсу как CJS/ESM. Если вы предоставляете только ESM, просто придерживайтесь этого формата ".": "./dist/index.js",

forgetso 10.05.2024 10:38

Другие вопросы по теме