Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 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. Не сталкивались ли?
Если бы вы были именно программистом, а не так чисто только ради денег в этой отрасли, то вы бы не задавали этот реально глупый вопрос.
Пожалуйста.
По возможности лучше, конечно же, не писать, а взять готовое. Мне, например, нравится ещё 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 и картинки этого компонента, если они в нем используются?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Стартуем библиотеку компонентов на React и TypeScript