Как да направите компонент React и да го публикувате в NPM

По време на моя стаж в JotForm направих уеб приложение за рутинни проследяване, използвайки React. В този проект имах нужда от компонент за отброяване на дата и реших да направя своя собствена. В крайна сметка исках да публикувам този компонент и да допринеса за общността с отворен код, така че го направих. По време на този процес се сблъсках с някои проблеми. В тази история искам да споделя моя опит и да ви помогна по вашето собствено пътуване, за да направите и публикувате вашия проект с отворен код.

реагират актуална-броене таймер

Стъпка 1: Създаване на демонстрационен проект

Ако искате да направите компонент React, имате нужда от платформа, която да го използвате и тествате. Затова нека създадем демонстрационен проект.

Първо, бъдете сигурни, че имате прилична версия на Node.js и npm

Използвах create-react-app, който е наистина лесен за използване. Просто ги напишете на терминал:

npm инсталирайте create-react-app -g
създайте-реагирайте-демо-приложение

и вуаля! Имате своето приложение React и готово за стартиране!

Сега можем да създадем компонент и да го използваме в нашия демо-проект. В папката src на директорията на вашия проект за демо-приложения създайте папка с име компоненти. след това друга папка с името на вашия компонент. Ще извикам компонента си DateCountdown. Сега в тази папка създайте 2 файла с имената index.js и style.css. Ще редактираме тези файлове след минута. Сега се върнете в папката src, има файл с име App.js, който е файлът за основния компонент на вашия проект. Добавете компонента, който ще създадете така:

import React, {Component} от 'react';
импортиране на DateCountdown от './components/dateCountdown';
// ...
направи () {
   връщане (
       // ...
       
       // ...
   )

Стъпка 2: Създаване на вашия компонент

Сега имате своя демонстрационен проект, време е да изработите своя лъскав продукт!

// index.js
import React, {Component} от 'react';
импортиране на PropTypes от 'prop-type';
импортиране './style.css';
class DateCountdown разширява Компонент {
    
    конструктори (подпори) {
        супер (подпори);
        // ...
        this.state = {...};
    }
    // ...
    направи () {
        нека {...} = this.props;
        нека {...} = this.state;
        нека единици = [...];
        // ...
        връщане (
            
                {
                  units.map ((единица, ключ) => {
                     // ...
                  })
                 }
            
        );
    }
}
DateCountdown.propTypes = {
    locales: PropTypes.array,
    dateTo: PropTypes.string.isRequired,
    обратен сигнал: PropTypes.func,
    mostSignificantFigure: PropTypes.string,
    numberOfFigures: PropTypes.number
}
DateCountdown.defaultProps = {
    locales: [„година“, „месец“, „ден“, „час“, „минута“, „секунда“],
    dateTo: (нова дата ()). toString (),
    обратно извикване: () => нула,
    mostSignificantFigure: 'none',
    числоOfigures: 6
}
експортиране по подразбиране DateCountdown;

Използвах propTypes и defaultProps, за да съм сигурен, че потребителят ще използва правилно моя компонент и дори ако не ми даде реквизит, моят компонент все още може да има смисъл.

Знам, че реквизитите ми са малко препълнени, беше необходимо, тъй като се опитвах да направя гъвкав компонент, хората обикновено искат да могат да играят с компонента колкото е възможно повече. По всякакъв начин компонентът трябва да работи правилно. Това е нещо, което трябва да имате предвид, когато проектирате продукт.

И добавям и малко стайлинг също:

/ * style.css * /
@keyframes moveup {
    0% {непрозрачност: 0; преобразуване: translateY (12px);}
    100% {непрозрачност: 1; преобразуване: translateY (0px);}
}
@keyframes movedown {
    0% {непрозрачност: 1; преобразуване: translateY (0px);}
    100% {непрозрачност: 0; преобразуване: translateY (-12px);}
}
.odometerStart {
    дисплей: вграден блок;
    анимация-име: модемиране 0,25s;
    -webkit-анимация: движение 0.25s;
    режим на анимация-запълване: напред;
}
.odometerEnd {
    дисплей: вграден блок;
    анимация-име: преместване 0.25s;
    -webkit-анимация: придвижване 0.25s;
    режим на анимация-запълване: напред;
}
.odometer блок {
    дисплей: вграден блок;
    обосновка-съдържание: център;
    подравняване-елементи: център;
}

Нашият компонент е готов! Време е да го подготвите, за да го публикувате до npm.

Стъпка 3: Приготвяне за публикуване

Но не можем да публикуваме нашия компонент от този демо-проект. Трябва да го преместим в друга папка на проекта и да направим самия компонент проект. Така създадохме папка някъде другаде и напишехме npm initon терминал. Напишете името, описанието и т.н. за вашия проект и това ще генерира файл package.json в тази папка. Сега създайте папка с име src в директорията на вашия проект и преместете вашите index.js и style.css файлове в тази директория.

Сега има някои неща, които трябва да знаем относно публикуването на пакет React. Най-вече нашият код не е оптимизиран код, което означава, че не работи на потенциална пълна скорост (независимо от ефективността на нашия код). Трябва да изградим нашия код, за да извлечем най-доброто от него.

Имаме нужда от нашия код, за да работим на всички браузъри без конфликти, свързани със стандартите на JavaScript (ES6, ES7 и т.н.). Babel го прави вместо нас. Той отнема нашия код и го превежда във форма, която всички браузъри ще разберат какво се случва.

Също така сме използвали множество файлове в нашия компонент, като style.css. Това също не е ефективно да ги стартирате в различни файлове. Така че още една стъпка към изграждането на нашия компонент по най-ефективния начин е да ги поставим по някакъв начин в един файл. За щастие, ние имаме уебпакет за това! Той отнема всички файлове и ние ги използваме и обединяваме в един файл. Това поставя нашия файл в най-ефективната му форма (с изключение на ефективността на вашия код).

Но как да използваме този Babel и уебпакет? Първо трябва да ги добавим като зависимости за нашия проект, като ги напишете на терминал в нашата директория на проекти:

npm install -D webpack webpack-cli babel-core

-D означава devDependitions, което означава, че нашият потребител няма да трябва да ги инсталира, за да използва нашия компонент, но имаме нужда от тях, за да изградим нашия компонент.

Webpack използва товарачи като инструменти за изграждане. Babel предоставя един, наречен babel-loader. Инсталирайте го като напишете npm install -D babel-loader на терминал.

babel-loader може да има проблеми с версията с babel-core, така че може да се наложи да понижите версията на babel-loader. В моя случай, babel-loader v8 искаше babel-core v7, но все още не беше публикуван до npm, така че понижих babel-loader до v7 и това работеше като чар.

За да може Babel да промени кода си по ефикасен начин, той трябва да знае какво използваме и кой стандарт искаме той да конвертира. Той използва предварително зададени настройки и плъгини за това. Пресетите всъщност са набори от плъгини. Трябва да ги добавим и като devDependpendations. Ще използваме env и reactpresets за този урок.

npm инсталиране -D babel-preset-env babel-preset-react

Използвахме и css, така че се нуждаем от css loader за обработка на задачата за зареждане на webpack. Можем да използваме css-loader със стил-товарач.

npm install -D css-loader за стил на стил

webpack се нуждае от конфигурационен файл, за да реши какво да се изгради и кои инструменти да се използват, докато се прави изграждането. Този файл се нарича webpack.config.js, така че създайте файл с това име. И го попълнете така:

var път = изисквам ('път');
module.exports = {
  запис: './src/index.js',
  изход: {
    path: path.resolve (__ dirname, 'build'),
    име на файл: 'index.js',
    libraryTarget: 'commonjs2'
  }
  модул: {
    правила: [
        {
          тест: /\.css$/,
          употреба: ['style-loader', 'css-loader']
      }
      {
        тест: /\.js$/,
        включват: path.resolve (__ dirname, 'src'),
        изключете: / (node_modules | bower_components | build) /,
        използвайте: {
          товарач: „товарач-товарач“,
          настроики: {
              предварително зададени настройки: ['react', 'env'],
          }
        }
      }
]
  }
  външни: {
    'react': 'commonjs react'
  }
};

Ние също трябва да добавим React като зависимост, тъй като ние правим компонент React.

npm инсталирайте react --save

Сега ние сме готови за изграждане! Просто ги добавете в package.json:

скриптове ": {
    "start": "webpack - гледайте",
    "build": "webpack"
  }

И напишете npm run run, натиснете enter и гледайте как вашият компонент е изграден!

Сега в директорията на вашия проект имате нова папка / build с index.js в нея! Просто променете package.json като:

"main": "build / index.js",

и ние сме готови да публикуваме!

Стъпка 4: Публикуване на компонента

Цялата пот и страдания за този момент! Време е да публикуваме нашия занаят за общността!

Създайте npm акаунт от npmjs.com. След това на терминала си в папката на проекта въведете npm adduser и влезте в акаунта си. И последният удар:

npm публикуване
Честито! Вие допринесохте за по-доброто на общността с отворен код!

Благодаря за четенето, ако останат празни точки, не се колебайте да попитате в коментарите.

Можете да проверите пакета npm, който създадох, докато правя този урок за вас от тук.

Също така, моля, кажете ми какво мислите за първата ми история.