Как я могу просто сделать реактивный компонент пакета npm - PullRequest
Новая
       7

Как я могу просто сделать реактивный компонент пакета npm

0 голосов
/ 05 сентября 2018

Я создавал этот компонент календаря реакции см. Здесь . В будущем я собираюсь добавить к нему целый набор функций и хотел, чтобы он был доступен любому разработчику, поэтому я опубликовал его на npm. Теперь я думал, что вы сможете npm install <package>, а затем добавить его в любой новый проект. Однако, по-видимому, это не так просто, основываясь на том, что я нашел в Google. Все остальные, кто это делает, делают стандартную реактивную плиту с реактивной, реактивной системой, веб-паком, вавилонским и всем остальным. Мне кажется, что это немного, просто иметь возможность поделиться компонентом с другими. Есть ли способ просто установить реагирующий компонент и добавить его в ваш проект?

Например, скажем, я только что создал компонент, которым хочу поделиться: 

export const Add = (props) => {
  let sum = props.a + props.b
  return (
    <span>{sum}</span>
  )
}

I npm publish add-component
Тогда в новый проект npm create-react-app my-app
Тогда npm install add-component 

import React, { Component } from 'react'
import './App.css'
import { Add } from 'add-component'

class App extends Component {
  render() {
    return (
      <div className='App'>
        <h1>Welcome to react!</h1>
        <Add a={2} b={2} />
      </div>
    )
  }
}

export default App

Поскольку create-react-app поставляется с предварительно настроенными и установленными babel и webpack, разве это не должно быть так просто? По какой-то причине это не так. Так что, если кто-то привык к такого рода вещам, не могли бы вы объяснить, почему это не работает и каков минимальный уровень, необходимый для экспорта компонента и возможности его импорта из модулей?

Для большей ясности в том, что я публикую на npm, см. Репозиторий git здесь
Я пытаюсь заставить его работать так: 

import React, { Component } from 'react'
import Calendar from 'Calendar'
import { redflat } from 'calendar.colors'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Calendar
          date={new Date()}
          colors={redflat}
        />
      <div>
    )
  }
}

1 Ответ

0 голосов
/ 05 сентября 2018

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

Голые основы того, что вам нужно, здесь: https://docs.npmjs.com/getting-started/publishing-npm-packages.

Вам также следует просмотреть https://docs.npmjs.com/getting-started/packages, поскольку вам понадобится где-то один файл (либо index.js, либо что-то, на что указывает поле main в package.json), который экспортирует нужный код сделать доступным.

Наконец, вы должны убедиться, что вы протестировали работу вашего модуля (в частности, что все ваши зависимости должным образом учтены) перед публикацией. Существует множество способов сделать это, но я бы порекомендовал иметь некоторые тестовые сценарии, которые вы можете запустить, удалить и переустановить node_modules и запустить тестовые сценарии.

Бонус: убедитесь, что у вас есть .npmignore, чтобы избежать публикации ненужных файлов.

...