導出Webpack庫

Question

所以對於一個項目，我想開始使用reactjs，但是不幸的是，當前項目沒有構建管道。 我想現在我可以使用WebPack，Babel和Sass設置構建管道並將其全部編譯成一個包，我們將其稱為bundle.js 。 我可以將已編譯的javascript文件鏈接到我們的渲染頁面之一，然后我的目標是以某種方式導出組件，以便可以使用以下功能創建它。

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

導出類的正確方法是什么？

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>