为 webpack 导出库

Question

所以对于一个项目我想开始使用 reactjs 但不幸的是当前项目没有构建管道。我认为现在我可以使用 WebPack、Babel 和 Sass 设置一个构建管道并将其全部编译成一个包，我们称之为 bundle.js。我可以 link 编译 javascript 文件到我们呈现的页面之一，然后我的目标是以某种方式导出组件，以便我可以使用以下函数创建它。

ReactDOM.render(
  React.createElement(MyExportedComponent, {prop: 'prop'}, null),
  document.getElementById('root')
);

导出 class 的正确方法是什么？

export default MyExportedComponent够吗？

Answer 1

通常，您会在 bundle.js 中调用 ReactDOM.render()，通常是在代表您的包入口点的文件中。

这意味着，您无需导出任何内容，只需将 bundle.js 嵌入到您的 HTML 文件中即可。

如果您需要从您的包中导出某些内容，您可以通过在 window 上设置属性将其附加到全局范围。不过你应该尽量避免这种情况。

Answer 2

我最终更改了 WebPack 配置以将代码导出为一个包。

这是主编译 JavaScript 文件中导出的包

exportedLibary.js

module.exports = {
    someRender: (element) => {
        ReactDom.render(
             <div>Hello</div>
        );
    }
}

并修改 WebPack 配置文件中的输出参数：

webpack.config.js

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'someDir'),
    library: 'RenderComponent'
}

现在我们可以在我们的任何项目中使用导出的库。

someProject.html

<script src="someDir/bundle.js"></script>

为 webpack 导出库

Exporting a library for webpack

javascript

integration

reactjs

webpack