我怎样才能简单地制作一个反应组件npm包

Question

我一直在构建这个反应日历组件see here。在未来，我将为它添加一大堆功能，并希望任何开发人员都可以访问它，所以我在npm上发布了它。现在我认为你可以使用npm install <package>，然后在任何新项目中添加它。然而，显然根据我在谷歌上发现的内容并不容易。所有这样做的人都会制作一个带有反应，反应，网络包装，巴贝尔以及其他所有标准反应应用的锅炉板。对我来说，似乎这只是为了能够与他人共享一个组件。有没有办法简单地安装反应组件并将其添加到您的项目？

比如说我刚刚制作了一个我要分享的组件：

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

我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 repository here 我试图让它像这样工作：

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>
    )
  }
}