Допустим, вы работаете над собственным проектом. Вы отчаянно пытаетесь решить какую-то проблему. Вы ищете помощи в Интернете. Но вы не можете его найти. Последний вариант - решить проблему самостоятельно. В итоге вы пишете сложное решение. С потенциалом помочь другим, столкнувшимся с подобной проблемой. Но как показать миру, что вы сделали? Продолжайте читать, и вы узнаете!
В этой статье вы узнаете, как написать и опубликовать собственный компонент React в виде пакета npm. Ты выучишь:
- Как написать и протестировать компонент на этапе разработки
- Как опубликовать компонент, когда он будет готов
Настройка среды
Все, что нам нужно для начала, - это пустая папка. Назовите его как хотите. Будьте настолько изобретательны, насколько хотите. Теперь мы запустим серию команд. Первый npm init. Вы попадете в интерактивную консоль. Просто продолжайте нажимать ENTER, пока он не исчезнет. Теперь установите зависимости
npm install --save react webpack
Ну что сказать. Пишем компонент React. Для этого нам, вероятно, понадобится React. И нам нужен веб-пакет для преобразования ES6 и JSX обратно в простой Javascript.
Теперь установите зависимости разработчика
npm install -D babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env webpack-cli
Так в чем разница. Когда кто-то действительно попытается использовать наш компонент. Он побежит npm install <package_name>. Что происходит, так это то, что зависимости будут установлены. Но зависимости dev не будут установлены.
Теперь, когда зависимости установлены, нам нужно немного изменить package.json. Нам нужно:
- настроить React как одноранговую зависимость
- Предоставьте
buildиstartскрипт - Установить точку входа на
build/index.js
Теперь нам нужны два файла, которые настроят webpack для транспиляции нашего кода. Эти файлы будут находиться в каталоге проекта. Изучите React.js онлайн из лучших руководств по React.js, рекомендованных сообществом программистов.
Пришло время немного кодировать. Наконец-то…
Создайте каталог src и внутри него создайте файл index.js. Это будет точка входа для веб-пакета. Следовательно, наш компонент будет находиться в этом файле. В этом примере мы напишем очень простой компонент. Это будет простой квадрат с цветом фона, шириной, высотой и текстом внутри. Эти переменные могут быть заданы как свойства компонентов. Если какое-то свойство не устанавливается, мы устанавливаем его значение по умолчанию. Вот как будет выглядеть компонент.
Теперь запустите npm start и проверьте, нет ли ошибок. Не должно быть. Теперь было бы неплохо проверить, можно ли использовать компонент как пакет npm, прежде чем мы его публикуем. Откройте package.json и укажите название пакета. Поскольку он открыт, было бы неплохо также установить автора и репозиторий git. Вы можете зарегистрировать учетную запись npm здесь. И не волнуйтесь, это бесплатно.
Тестирование пакета
Хорошо… У нас есть посылка. Пришло время проверить это. Внутри каталога проекта запустите npm run build. Это построит наш компонент. Затем запустите npm link. Это свяжет пакет с зависимостями npm. Фактически это означает, что мы сможем использовать его в другом проекте, но только на нашем компьютере. Теперь откройте любой проект React и перед его запуском запустите npm link <package_name>. Теперь у вас должна быть возможность запустить проект и импортировать пакет как любой другой пакет. Вот мой пример
Теперь, если вы не удовлетворены, вернитесь к проекту компонента и внесите некоторые изменения. Запустите npm run build, и вы сразу сможете его протестировать.
Публикация пакета
Довольны и готовы опубликовать? Хорошо, если вы еще не регистрировали учетную запись, сделайте это здесь. Затем в каталоге проекта компонента запустите npm login и войдите в систему, используя свои учетные данные. После этого запустите npm publish. И вот теперь компонент общедоступен и доступен для других.
Заключение
В этой статье мы узнали, как:
- настроить проект для написания компонентов React как пакет npm
- протестировать пакет локально
- опубликовать пакет
Вот и все. И я считаю, что у нас осталась еще пара секунд. Если у вас есть вопросы, не стесняйтесь спрашивать меня. С радостью отвечу на любые вопросы. Ссылки на примеры внизу. До скорого.
