我怎样才能简单地制作一个反应组件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>
    )
  }
}

Answer 1

通过所有步骤进行正确的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，以避免发布不必要的文件。