Включение локального пакета в сборку webpack (турборепо)
У меня есть два пакета и
app
в «монорепо» с использованием турборепо.
У меня репо пользовательского интерфейса с
.tsx
файлы, и он не создается, это
package.json
main
файл машинописного текста.
Однако при запуске я получаю сообщение об ошибке при импорте из
ui
основной файл.
Можно ли включить это
node_module
от
nextjs
перспектива? Глядя на
config.module.rule
Я не могу найти никаких правил для файлов машинописного текста. Я не уверен, как настроить машинный код для файлов nextjs.
4 ответа
Пример турборепозитория используется в приложениях, чтобы получить Next для переноса этих зависимостей пакета, которые не имеют шага сборки:
// in next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
module.exports = withTM({
reactStrictMode: true,
});
Из этой статьи создателя Turbo Repo Джареда Палмера:
[Чтобы] сделать это, этот пакет можно использовать без ссылок на проект или шага сборки TypeScript (через tsc или esbuild и т. д.), если вы придерживаетесь 2 правил:
- Приложение, использующее внутренний пакет, должно транспилировать и проверить его тип.
- Вы никогда не должны публиковать внутренний пакет в NPM. ...
**Next.js
Если вы используете Next.js, вы можете удовлетворить эти ограничения с помощью плагина next-transpile-modules, который скажет Next.js запускать определенные зависимости через его пайплайны Webpack/Babel/TypeScript.
Поэтому убедитесь, что вы соблюдаете ограничения, изложенные в предыдущем отрывке. Поскольку вы используете Next, проверьте
next.config.js
и подтвердите, что используете
next-transpile-modules
для ваших внутренних зависимостей.
добавьте это в package.json вашего приложения, чтобы решить эту проблему:
"bundledDependencies": [
"ui"
]
Взгляните на проект Turborepo по умолчанию, как он объясняется здесь: Начало работы . Сам репозиторий можно найти здесь: GitHub.
Этот проект поставляется с 3 различными пакетами и двумя простыми приложениями NextJS (docs/web), которые используют компонент (кнопку) из репозитория пользовательского интерфейса.
Используйте этот проект, чтобы понять структуру Turborepo и настроить ее под свои нужды.
Я сделал именно то, что описал выше, и мои приложения NextJs просто отлично работают, делясь (tsx-) компонентами из пакета пользовательского интерфейса.
Начиная с Next.js 13, вы можете просто сделать следующее:
// next.config.js
module.exports = {
transpilePackages: ['ui'],
}