如何解决如何在 npm 包中发布 ES6+ 类并将它们导入另一个应用程序
我正在编写一个 react 应用程序,想重用另一个应用程序中的一些组件,所以我认为我可以轻松地将共享组件移动到 npm 包中,但结果证明这是语法组合的雷区,其中大部分不工作。
对于我尝试过的所有非工作语法变体,我从 react 得到的运行时错误消息是“期望对象或字符串但未定义。也许你混淆了默认导出和命名导出”。
因为这个问题涉及多种技术(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 };
我尝试从 index.js
文件中的 npm 包导出它的各种方法如下所示:
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';
要检查的重点是:
- 为每个组件拥有一个单独的源文件,并从该源文件中导出组件作为默认导出。
- 在您的 npm 包中导入这些组件时,不要在其周围放置
{ }
,因为这仅用于命名导出,而我们将其导出为默认导出。 - 在您的
index.js
文件中,您需要将组件导入为默认导入(不带{ }
)并导出{ }
内的所有组件且不带default
关键字. - 在您使用这些组件的应用程序中,您必须将它们括在
{ }
中才能使它们工作,因为它们是从 npm 包中作为命名导出导出的。
就是这样。知道怎么做就简单!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。