Javascript 如何简单地制作react组件npm包

我一直在构建这个react日历组件。在未来，我将向它添加一系列功能，并希望它能够被任何开发人员访问，所以我在npm上发布了它。现在，我想您可以

npm安装

，然后将其添加到任何新项目中。然而，根据我在谷歌上的发现，显然这并不容易。其他所有这样做的人都会为标准的react应用程序制作一个带有react、react dom、webpack、babel和其他一切的锅炉板。对我来说，仅仅为了能够与他人共享一个组件，这似乎有点过分。有没有一种方法可以简单地安装react组件并将其添加到项目中

例如，假设我刚刚制作了一个想要共享的组件：

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

既然

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

import React，{Component}来自“React”
从“日历”导入日历
从“calendar.colors”导入{redflat}
类应用程序扩展组件{
render（）{
返回(
)
}
}

完成正确发布npm的所有步骤可能超出了简单SO答案的范围。大多数人只使用样板的原因是因为它会涉及太多。。。然而，你是对的，样板中有很多可以避免的瑕疵

您需要的基本信息如下：

您还应该查看，因为您需要在某个地方有一个文件（或者是

index.js

，或者是

package.json

中的

main

字段所指向的文件）来导出您想要提供的代码

最后，您应该确保在发布之前测试您的模块的工作情况（具体来说，所有依赖关系都得到了正确的解释）。有多种方法可以做到这一点，但我建议您使用一些可以运行的测试脚本，删除并重新安装

node\u模块

，然后运行测试脚本

---

奖励：确保你有一个

.npmignore

，以避免发布不必要的文件。

我对如何制作npm包很熟悉。我已经在npm上发表过了。我只是不知道为什么当我在react from node_modules中导入它时，它的工作方式与我在react应用程序中创建一个组件并从src目录导入它的工作方式不同。我认为这与webpack有关，但我在react文档中找不到任何解释。在你的Githhub中，你有一个package.json，主字段指向一个不存在的Calendar.js文件。因此，依赖项解析无法工作。请参阅我上面关于模块的说明和链接。它不应该是

export const Add=（）=>…

？

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