Создайте простой пакет RACT NPM в простых шагах с использованием CRA

Автор оригинала: Peter Odekwo.

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

Во-первых, вам нужно убедиться, что у вас установлен узел на вашем компьютере. Узел по умолчанию, отправляются с NPM, поэтому вам не нужно беспокоиться о том, чтобы иметь отдельную установку для NPM. Скачать узел здесь Узел Версия, используемая в этом проекте, это 10.15.0 NPM Версия, используемая в этом проекте, это 6.4.1 Отказ

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

С этим, давайте погрузимся прямо в.

погружение

Шаг один: Настройка проекта с CRA

• Чтобы иметь возможность настроить наш проект с CRA, мы должны убедиться, что у нас есть создание-реактивное приложение, установленное глобально или просто использовать NPX. Итак, откройте терминал и беги;

- sudo npm install -g create-react-app
  then
- create-react-app react-custom-card

С NPX ;

- npx create-react-app react-custom-card

Примите к сведению, React-Custom-Card – это пользовательское имя для нашего пакета. Приложение Create-raction и инициализирует наш проект с Git, настроить WebPack, тестирование и т. Д.

• Теперь, когда мы успешно создали наш проект, мы будем приступить к установке дополнительной зависимости (Babel).
• Babel – транспортер для ES6 => ES5

     npm install --save-dev @babel/cli @babel/preset-react

Шаг второй: создать компонент карты

• Создать Компоненты каталог в каталоге SRC и добавьте два файла с именем Card.js и card.csss Отказ
• Card.js Файл будет содержать код для нашего карточного компонента
• card.csss Должен содержать стили карты

Карта

   import React from 'react';
   import './card.css';

   const Card = (props) => {
     return (
       

         {props.children}
       
     );
   };

   export default Card;

Шаг третий: стиль карты карты

card.css

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Шаг четвертый: package.json

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

• Откройте пакет и добавьте следующее в раздел скриптов

"publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",

• Установите личное значение

 "name": "react-custom-card",
"version": "0.1.0",
"private": false,

• Добавить Вавилон

"babel": {
"presets": [
  "@babel/preset-react"
]
},

Вот полный Package.json файл

{
"name": "react-custom-card",
"version": "0.1.0",
"private": false,
"babel": {
  "presets": [
    "@babel/preset-react"
  ]
},
"dependencies": {
  "react": "^16.4.0",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/components -d dist --copy-files"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
"devDependencies": {
  "@babel/cli": "^7.5.5",
  "@babel/preset-react": "^7.0.0"
}
}

Шаг пять: опубликовать на НПМ

1. Регистрация учетная запись, если у вас нет одного
2. Войти с вашего терминала

• Укажите свое имя пользователя и пароль

1. Tranpile Code от ES6 до ES5

2. Опубликовать пакет

Поздравляем, вы только что создали свой первый пакет NPM !!!