如何在npm包中发布ES6+类并将它们导入到另一个应用程序中?

我正在编写一个react应用程序，想要重用另一个应用程序中的一些组件，所以我认为我可以很容易地将共享组件移到npm包中，但事实证明这是一个语法组合的雷区，其中大多数都不工作。

对于我尝试过的所有非工作语法变体，我从react获得的运行时错误消息是"期望对象或字符串，但未定义。也许你把default和named exports搞混了。

因为这个问题涉及多种技术(React, ES5, ES6,Babel和Node.js)，似乎没有文档解释如何使所有这些东西一起工作。

我尝试过的各种编写共享组件的方法如下:

export default Component1 = (props) => {}

或

const Component1 = (props) => {}
export default Component1;

或

export Component1 = (props) => {}

或

const Component1 = (props) => {}
export Component1;

或

const Component1 = (props) => {}
export { Component1 };

或

const Component1 = (props) => {}
export default { Component1 };

我尝试从npm包中导出index.js文件的各种方法如下:

export Component1 from './Component1';
export Component2 from './Component2';

或

export { Component1 } from './Component1';
export { Component2 } from './Component2';

或

import { Component1 } from './Component1';
import { Component2 } from './Component2';
export Component1;
export Component2;

或

import { Component1 } from './Component1';
import { Component2 } from './Component2';
export { Component1, Component2 };

或

import { Component1 } from './Component1';
import { Component2 } from './Component2';
export default { Component1, Component2 };

我尝试将这个共享组件导入到我的应用程序中的各种方法如下:

import Component1 from 'my-shared-package';

或

import { Component1 } from 'my-shared-package';

正如您所看到的，排列真的堆积如山，到目前为止我尝试的所有排列都会导致React的运行时错误。尝试每种排列都需要时间，因为每次尝试都要构建和发布包。

在测试了上面所有的排列之后，我发现只有一个适合我。为了避免其他人经历同样的练习，下面是有效的版本。

注意，每个组件必须在自己的源文件中。

假设Component1没有依赖项。你应该这样写:

const Component1 = (props) => { return (<div />); }
export default Component1;

假设Component2依赖于Component1。可以这样写:

import Component1 from './Component1';
const Component2 = (props) => { return (<Component1 />); }
export default Component2;

现在我们需要通过创建一个index.js文件来导出这些组件，该文件将作为npm包的入口点。这个文件需要看起来像这样:

import Component1 from './Component1';
import Component2 from './Component2';
export { Component1, Component2 }

现在我们需要使用Babel将这些源文件转换成ES5语法，并将输出发布到npm。您可以在这里看到如何做到这一点的工作示例:https://github.com/Bikeman868/react-svg-pie

要将这些组件导入到您的应用程序中，您需要npm install <package>，然后在源代码中引用它们，如下所示:

import { Component1, Component2 } from 'my-shared-package';

检查的重点是:

就是这样。当你知道如何简单的时候!

相关内容