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

Question

我一直在构建这个反应日历组件see here。将来我将为其添加一大堆功能，并希望任何开发人员都可以访问它，所以我将它发布在 npm 上。现在我认为您可以npm install <package> 然后将其添加到任何新项目中。但是，根据我在谷歌上找到的内容，显然这并不容易。其他所有这样做的人都使用 react、react-dom、webpack、babel 和其他所有东西来制作标准反应应用程序的样板。对我来说，这似乎只是为了能够与他人共享一个组件。有没有办法简单地安装一个 react 组件并将其添加到您的项目中？

例如说我刚刚制作了一个我想分享的组件：

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 存储库 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>
    )
  }
}

Answer 1

完成正确的 npm publish 的所有步骤可能超出了简单的 SO 答案的范围。大多数人只使用样板文件的原因是因为它可能会涉及很多......但是，你是对的，样板文件包含很多可以避免的垃圾。

您需要的基本知识在这里：https://docs.npmjs.com/getting-started/publishing-npm-packages。

您还应该查看https://docs.npmjs.com/getting-started/packages，因为您需要在某处有一个文件（index.js 或package.json 中的main 字段指向的文件）导出您想要提供的代码.

最后，您应该确保在发布之前测试您的模块是否正常工作（特别是，您的所有依赖项都已正确考虑）。有多种方法可以做到这一点，但我建议您使用一些可以运行的测试脚本，删除并重新安装 node_modules，然后运行测试脚本。

奖励：确保您拥有.npmignore 以避免发布不必要的文件。