Создать модуль NPM для React

Всем привет, предметом этой статьи будет создание и публикация модуля npm. Даже если npm очень богат с точки зрения модулей, может быть сложно найти некоторые из модулей или их текущее состояние. На этом этапе вы можете создать свой собственный модуль и использовать его. Я начинаю писать без лишних слов.

Шаг 1. Создайте пользователя NPM

В качестве первого шага мы создаем членство npm.

Шаг 2. Войдите в npm

Вам необходимо войти в систему на своем компьютере, чтобы поделиться своим модулем.

$ npm adduser

Шаг 3. Создайте файлы модуля

Теперь мы готовы написать наш модуль. Создайте папку на моем компьютере и откройте терминал.

$ npm init

Вводим нужную нам информацию. И файл package.json был создан.

Нам нужно сделать небольшую аранжировку в этом файле.

...
main: “index.js”,
...

В этом разделе показано, какой файл следует читать во время работы модуля. Из-за используемой файловой структуры я изменяю это поле следующим образом.

...
"main": "./dist/bandle.js"
...

Шаг 4. Установите babel и webpack

npm install -D webpack webpack-cli @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-react-jsx @babel/preset-env babel-loader

Шаг 5. Установите react и react-dom

$ npm i react react-dom --save

Шаг 6. Настройте webpack и babel

Наконец, нам нужно отредактировать файл package.json.

"scripts": {
  "start": "webpack --watch",
  "build": "webpack"
},
"peerDependencies": {
  "react": "^16.8.6"
}

Шаг 7. Создайте файл модуля

Мы завершили все наши настройки. Теперь создаем файл index.js в папке src.

Шаг 7. Установите специальный модуль в свой проект

Перейдите в каталог, в котором находится ваш проект с терминалом.

$ npm i <YOUR_MODULE_PATH>

Modülünüz projenize eklendi. Şimdi ссылка yapmamız gerekiyor.

Перейдите по пути к вашему модулю с помощью терминала.

$ npm link

Ваш путь к проекту

$ npm link <YOUR_MODULE_NAME>

Давайте продолжим с вашего каталога модулей. Чтобы сделать ваш модуль доступным, вам необходимо его собрать.

$ npm build

Если вы не хотите постоянно строить на этапе разработки;

$ npm start

Активировать горячую перезагрузку можно командой

Шаг 8. Опубликуйте модуль

Вы закончили разработку и теперь готовы поделиться своим модулем. Все, что вам нужно сделать, это открыть папку модуля в терминале;

$ npm publish

Поздравляем, теперь у вас есть модуль, опубликованный на npmjs.com.

Для тех, кто не хочет заниматься этими этапами, я оставляю адрес шаблона ниже.