将 React 组件导出为 npm 包

Question

说我想在npm包中分享一个简单的react组件，让别人使用，我必须这样做吗？

import SomeComponent from './components/SomeComponent';

module.exports = {
  SomeComponent: SomeComponent
}

参考 https://github.com/alanbsmith/npm-example-module/blob/master/lib/index.js

在项目的package.json中可以看到包的主文件是build/index.js，但是为什么作者不直接导出components/SomeComponent，而是创建了一个wrapper呢？我知道他使用 babel，这是为了支持旧版浏览器的代码，但为什么在这种情况下使用 module.exports？

Answer 1

如果您使用的是 es6 导入，您也应该使用 es6 导出以保持一致性。

import SomeComponent from './components/SomeComponent'
export { SomeComponent }

并在您的package.json 中将main 字段设置为构建后的文件。比如

{
   "main": "lib/index.js"
}

然后人们可以像这样导入它：

import { SomeComponent } from 'my-lib'

不过，您所遵循的示例看起来确实已经过时，并且没有遵循很多好的做法。 Here's a more modern-looking solution that you'll probably have less trouble with.