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

Question

我一直在构建这个反应日历组件，请参见此处。 将来，我将向它添加一大堆功能，并希望任何开发人员都可以访问它，因此我将它发布在 npm 上。 现在我想你可以npm install <package>然后将它添加到任何新项目中。 然而，根据我在谷歌上找到的内容，显然这并不容易。 执行此操作的其他人都为标准的 React 应用程序制作了带有 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 存储库
我试图让它像这样工作：

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 发布的所有步骤可能超出了简单的 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以避免发布不必要的文件。