Question

我一直在构建此反应日历组件see here。将来，我将向其中添加很多功能，并希望任何开发人员都可以使用它，因此我在npm上发布了它。现在，我认为您可以npm install <package>，然后将其添加到任何新项目中。但是，根据我在google上发现的信息，显然这并不容易。其他执行此操作的人都可以制作带有标准反应应用程序的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发布可能超出了简单的SO答案的范围。大多数人只使用样板的原因是因为它会参与其中……但是，您是对的，样板包含很多可以避免的残留物。

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

您还应该查看https://docs.npmjs.com/getting-started/packages，因为您需要在导出的某个位置（index.js或main的{{1}}字段所指向的文件）中放置一个文件您要提供的代码。

最后，您应该确保在发布之前测试模块是否正常工作（特别是正确说明了所有依赖项）。有多种方法可以执行此操作，但是我建议您可以运行一些测试脚本，删除并重新安装package.json，然后运行测试脚本。

奖金：请确保您有node_modules，以避免发布不必要的文件。

我如何简单地使React组件NPM包

1 个答案: