Привет всем, кто хочет знать все о создании модуля React. Модуль компонента React, который я создал, предназначался для Иконок материалов Google. (Https://www.npmjs.com/package/react-google-material-icons).

Чтобы создать этот модуль, я следил за приведенным ниже постом, который меня отлично сработал. Если вы хотите прочитать об этом больше, я предлагаю вам прочитать этот пост.

Https://medium.com/@jbscript/developing-react-components-and-libraries-with-nwb-2018059ea25a

Итак, приступим!



Разработка компонентов и библиотек React с помощью nwb
Реализация компонента LoadingButton в качестве руководства по использованию nwb для разработки модуля React npm medium.com



Предпосылки

Конечно, вам необходимо установить Nodejs и npm. 😎

Установить nwb глобально

Создайте проект

Здесь последний аргумент - это имя проекта, и он создаст имя каталога с указанным выше именем проекта и всеми необходимыми файлами под ним. Затем возникнет несколько вопросов, и я ответил «да» на «пакеты Es6» и «сборку UMD для глобального использования». Если вы включите сборку UMD, это позволит вам использовать модуль с глобальной переменной, которая задаст следующий вопрос. Я добавил ReactGoogleMaterialIcons в качестве набора сборки UMD.

Теперь проект почти готов. Это просто вопрос выполнения ваших кодов. :) Если вы хотите подтвердить настройку перед началом кодирования, просто запустите npm install, а затем npm start. Это откроет приложение в браузере.

Код

Я добавил файл main.css в src. Затем я импортировал шрифт Google Material из их CDN в сам файл css.

Затем импортируйте его в index.js и поместите код jsx, как показано ниже.

Пользователь может предоставить модулю 2 свойства: значок и его размер. Однако размер - это необязательный параметр (по умолчанию 24).

Примечание

Я добавил флаг «- copy-files» в сценарий сборки в файле package.json, потому что в противном случае окончательная сборка не будет работать, поскольку конфигурация по умолчанию не копирует файл css в каталоги «es» и «lib».

Чтобы проверить модуль, мы должны написать тест в каталоге под названием «demo». В файле index.js, который находится в каталоге demo, я импортировал свой модуль (файл index.js в каталоге src) и написал несколько тестовых примеров.

Вот и все. Запустим код.

Сначала запустите команду npm install, если вы еще не запускали ее. Затем запустите npm start. Если все в порядке, вы получите следующий результат.

Публикация в npm

Запустите команду npm run build, чтобы собрать пакет. Затем запустите команду npm publish.