将反应组件导出为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，而是创建了一个包装器？我知道他使用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.