Comments 12
Или, как вариант, одна строка и rollup, jest, etc под капотом:
$ npx tsdx create mytslib
Хороший вариант, спасибо. Дополнил статью. Есть недостаток — не нашёл способов как-нибудь расширить конфигурацию или сделать eject. Про это есть issue. Конечно, зависит от проекта. Для многих это может быть не критично.
Любезный, а чего ради эта гимнастика с ручным созданием проекта, если добрые умные дяди из фейсбука давно уже придумали сreacte-react-app c typescript-ом и всем всем всем? И зачем babel для транспиляции в ES5, если typescript с этим прекрасно справляется?
При должной сноровке и опыте, я не сомневаюсь, что можно и из CRA стартовать библиотеку. Кстати, CRL базируется на CRA — тянет за собой react-scripts-ts, который в свою очередь основан на react-scripts, правда старой версии. Я попробовал перетащить это на последний react-scripts и не смог натянуть сову на глобус. Пришлось распотрошить и собрать сову самостоятельно.
Далее. Существует 2 способа перегнать TS в ES5 — tsc и babel 7. CRA, CRL и tsdx используют именно последний. А babel 7 в свою очередь имеет ряд ограничений для такой задачи, что не слишком круто, но и не фатально в общем случае. Это влечёт за собой обязательную опцию компилятора — isolatedModules, которая в свою очередь не хочет работать вместе с declaration-опцией, а мне таки хотелось генерировать `d.ts`. Вот тут предлагают использовать 2 конфига, но что-то у меня рука тянется к лицу от этого.
Про свои неудачи я написал под спойлером «А потом что-то пошло не так...».
Также в той заготовке, что я сделал руками, не используется babel для сборки TS. Однако, да, он есть в devDependencies. Это из-за `webpack-blocks` (говорит есть в его peerDependecies, хочу его, не могу), который в свою очередь используется в `webpack.config.js`. Что? Webpack? У нас же вроде Rollup. Ага. Для самой библиотеки Rollup, вот только StoryBook не может сам без конфига для своего внутреннего webpack работать с TS-компонентами. Такие дела. Может быть можно и проще, но я пока не вижу больших проблем от этого — это же devDependencies, к пользователям эта орава не поедет.
Далее. Существует 2 способа перегнать TS в ES5 — tsc и babel 7. CRA, CRL и tsdx используют именно последний. А babel 7 в свою очередь имеет ряд ограничений для такой задачи, что не слишком круто, но и не фатально в общем случае. Это влечёт за собой обязательную опцию компилятора — isolatedModules, которая в свою очередь не хочет работать вместе с declaration-опцией, а мне таки хотелось генерировать `d.ts`. Вот тут предлагают использовать 2 конфига, но что-то у меня рука тянется к лицу от этого.
Про свои неудачи я написал под спойлером «А потом что-то пошло не так...».
Также в той заготовке, что я сделал руками, не используется babel для сборки TS. Однако, да, он есть в devDependencies. Это из-за `webpack-blocks` (говорит есть в его peerDependecies, хочу его, не могу), который в свою очередь используется в `webpack.config.js`. Что? Webpack? У нас же вроде Rollup. Ага. Для самой библиотеки Rollup, вот только StoryBook не может сам без конфига для своего внутреннего webpack работать с TS-компонентами. Такие дела. Может быть можно и проще, но я пока не вижу больших проблем от этого — это же devDependencies, к пользователям эта орава не поедет.
Это из-за `webpack-blocks`
Не только. @storybook/addon-info тоже его хочет. Точнее не совсем он, а react-docgen-typescript-loader, для которого он собственно и нужен.
Плюс, если лень конфигурить ts для storybook врукопашную — у них есть preset. Но он тоже весьма капризен и очень хочет ts-loader как загрузчик, другое кушать не желает. Зоопарк лоадеров. Слегка раздражает.
Ну, и если можно, вопрос к вам, не могу понять, все обновляется при любых изменениях компонента кроме jsDoc описания. Обновляется только после полного перезапуска storybook. Не сталкивались ли?
UFO just landed and posted this here
Если бы вы были именно программистом, а не так чисто только ради денег в этой отрасли, то вы бы не задавали этот реально глупый вопрос.
Пожалуйста.
По возможности лучше, конечно же, не писать, а взять готовое. Мне, например, нравится ещё semantic-ui.
Но бывает, что готовое не подходит, нужны свои стили или сверстать компонент по-другому, свои компоненты со своими фичами, и тогда готовое может не подойти.
В моём случае у нас есть некий шаблон со своими стилями и вёрсткой, который используется в нескольких системах и все они выглядят единообразно. Автор шаблона его забросил. Мы использовали его под Angular.js. Новые системы мы будем писать на React + мигрируем некоторые старые, а стили менять не хотим, чтобы сохранить единообразие и вообще мигрировать постепенно и незаметно для пользователя. Из этих требований и рождается наша библиотека компонентов на React. Благо мне верстать и писать css не надо (по минимуму), просто компонентов напилить, а ещё можно подсматривать в готовые бибилотеки.
Если посмотреть на опыт других компаний, то много кто пишет свой UI-kit. Навскидку JetBrains, Яндекс, Тинькоф, Сбербанк — правда, у этих ребят толпы разработчиков, отдельные команды под это, могут себе позволить.
По возможности лучше, конечно же, не писать, а взять готовое. Мне, например, нравится ещё semantic-ui.
Но бывает, что готовое не подходит, нужны свои стили или сверстать компонент по-другому, свои компоненты со своими фичами, и тогда готовое может не подойти.
В моём случае у нас есть некий шаблон со своими стилями и вёрсткой, который используется в нескольких системах и все они выглядят единообразно. Автор шаблона его забросил. Мы использовали его под Angular.js. Новые системы мы будем писать на React + мигрируем некоторые старые, а стили менять не хотим, чтобы сохранить единообразие и вообще мигрировать постепенно и незаметно для пользователя. Из этих требований и рождается наша библиотека компонентов на React. Благо мне верстать и писать css не надо (по минимуму), просто компонентов напилить, а ещё можно подсматривать в готовые бибилотеки.
Если посмотреть на опыт других компаний, то много кто пишет свой UI-kit. Навскидку JetBrains, Яндекс, Тинькоф, Сбербанк — правда, у этих ребят толпы разработчиков, отдельные команды под это, могут себе позволить.
Экспортировать код не проблема. А как дела с экспортом стилей из библиотеки, изображений и шрифтов?
К примеру делаем import MyCmp from 'mylib';
Будут ли импортироваться CSS и картинки этого компонента, если они в нем используются?
Sign up to leave a comment.
Стартуем библиотеку компонентов на React и TypeScript