build(*): change project setup #87
Conversation
- allow use one component in another - build via tsc - setup jest - update build scripts - revert packages folder
|
Собрана новая демка. |
| 'error', | ||
| { devDependencies: true, packageDir: './' }, | ||
| ], | ||
| 'import/no-extraneous-dependencies': 'off' |
There was a problem hiding this comment.
Пришлось пока отключить, т.к. линтер ругается на импорт компонентов.
Например:
import { Input } from '@alfalab/core-components-input';
просит добавить @alfalab/core-components-input в корневой package.json.
Хотя он не должен быть зависимостью в агрегирующем пакете.
There was a problem hiding this comment.
Если добавить зависимость не в корневой package.json, а в package.json пакета, то линтер успокоется.
There was a problem hiding this comment.
мне тоже так казалось. Но почему-то ошибка исчезает, только если к корневой добавить
bin/build.sh
Outdated
| # запускаю скрипт build-root-package.sh во всех подпакетах | ||
| lerna exec --parallel -- $(pwd)/bin/build-root-package.sh \$LERNA_PACKAGE_NAME | ||
|
|
||
| # меняю импорты из @alfalab/core-components на относительные в агрегирующем пакете | ||
| yarn replace-in-file "require(\"@alfalab/core-components-" "require(\"../" dist/**/*.js |
There was a problem hiding this comment.
В агрегирующем пакете компоненты должны импортироваться друг в друга локально, а не быть внешними зависимостями. Сейчас просто делаем замену по js файлам.
Как это сделать лучше?
| @@ -0,0 +1,19 @@ | |||
| module.exports = { | |||
There was a problem hiding this comment.
Раньше запуск тестов был через react-scripts, но он начал конфликтовать с tsconfig
Поэтому отказался от react-scripts и вынес настройку jest'а.
К тому же это позволит в дальнейшем гибко настроить тестирование.
| @@ -0,0 +1,13 @@ | |||
| { | |||
| "include": ["src", "../../typings"], | |||
There was a problem hiding this comment.
К сожалению все path-зависимые опции не работают через extends (issue) - поэтому приходится определять их в каждом файле заново.
There was a problem hiding this comment.
Странно, у нас всё ок.
Ниже скрин общего конфига ТС и конфига у пакета.
There was a problem hiding this comment.
Сейчас, если не добавить typings в include:
Cannot find module './index.module.css'.
Хз, может что-то не так прописал
| "compilerOptions": { | ||
| "skipLibCheck": true, | ||
| "target": "esnext", | ||
| "module": "commonjs", |
There was a problem hiding this comment.
теперь эти настройки влияют на сборку
|
Собрана новая демка. |
| @@ -1,7 +1,7 @@ | |||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |||
|
|
|||
| # dependencies | |||
| /node_modules | |||
| node_modules/ | |||
There was a problem hiding this comment.
Игнорим везде, а не только в корне
|
Собрана новая демка. |
|
А разве https://classic.yarnpkg.com/en/docs/workspaces не решает проблему? |
workspaces же для приватных репозиториев
|
|
Это не так, посмотри на реакт например Подразумевается, что ты не должен паблишить корневой воркспейс, но пакеты в нём паблишить можно |
|
Если хочется future-proof решения, то можно посмотреть в сторону yarn@2 |
|
Собрана новая демка. |
| lerna exec --parallel -- rm -rf ./dist/__snapshots__ | ||
| # обрабатываю ts во всех подпакетах | ||
| lerna exec --parallel -- tsc --p tsconfig.json | ||
| lerna exec --parallel -- tsc --build |
There was a problem hiding this comment.
Раньше компиляция ts делалась babel'ом, а генерация деклараций через tsc. Половина опций из tsconfig не использовалась.
Теперь сборкой занимается только компилятор ts
|
При использовании Заменил на Также, теперь публикация происходит из корня пакета, а не из папки |
Проблема
Оказалось, что сейчас мы не можем использовать один компонент в другом 🤷♂️
Т.к. это монорепа и все пакеты публикуются отдельно, то мы не можем указывать в импорте относительные пути.
Вместо этого нужно указать зависимость как:
import { Input } from '@alfalab/core-components-input';Но сейчас такой импорт становится внешней зависимостью.
В нашем же случае необходимо, чтобы:
В данном PR:
yarn workspacestsc --buildbabelreact-scripts, т.к. он не позволяет использовать "paths" в ".tsconfig" (issue) и конфликтует с некоторыми настройками.react-scriptsзаставлял использоватьsrc)jest(раньше он работал через react-scripts)Вынести в README
package.jsonпакетаtsconfig.jsonпакета следующую запись:import { Input } from '@alfalab/core-components-input';