将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，但是为什么作者不只是export 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'

但是，您要遵循的示例看起来确实过时了，并且没有遵循很多良好实践。这是一个外观更现代的解决方案，您可能会遇到比较少的麻烦。