У меня есть проект, который использует lerna (monorepo, несколько пакетов). Немногие из пакетов являются автономными приложениями.
Чего я хочу добиться, так это иметь псевдонимы для нескольких пакетов, чтобы иметь что-то вроде внедрения зависимостей. Так, например, у меня есть псевдоним @package1/backendProvider/useCheckout
и в веб-пакете в моем автономном приложении я разрешаю его как ../../API/REST/useCheckout
. Поэтому, когда я меняю бэкэнд-провайдера на что-то другое, я меняю его только в webpack.
Проблема
Проблема возникает, когда этот псевдоним используется каким-либо другим пакетом (не отдельным приложением). Например:
Структура каталогов выглядит следующим образом:
Project
packageA
ComponentA
packageB
API
REST
useCheckout
standalone app
ComponentA находится в packageA
useCheckout находится в packageB по пути /API/REST/useCheckout
ComponentA использует useCheckout
с таким псевдонимом, как import useCheckout from '@packageA/backendProvider/useCheckout
Автономное приложение использует компонент A
Ошибка, которую я получаю, заключается в том, что Module not found: Can't resolve '@packageA/backendProvider/useCheckout
Однако, когда тот же псевдоним используется в автономном приложении (у которого есть веб-пакет с приведенной ниже конфигурацией), он работает. Проблема возникает только для зависимостей.
Возможные решения
Я знаю, что одним из решений было бы скомпилировать каждый пакет с помощью веб-пакета, но это не очень удобно. Что я думаю, выполнимо, так это сказать веб-пакету преобразовать эти псевдонимы в пути к каталогам, а затем перекомпилировать его. Первая часть (разрешение псевдонимов) выполнена.
Текущий код
Поскольку я использую NextJS, моя конфигурация веб-пакета выглядит так:
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: "empty"
};
const aliases = {
...
"@package1/backendProvider": "../../API/REST/"
};
Object.keys(aliases).forEach(alias => {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: [path.resolve(__dirname, aliases[alias])],
use: [defaultLoaders.babel]
});
config.resolve.alias[alias] = path.resolve(__dirname, aliases[alias]);
});
return config;
}