如何将 ReactJS 应用程序导出为要在其他应用程序中使用的包？答案

【问题标题】：How to export ReactJS app as package to be used in other app?如何将 ReactJS 应用程序导出为要在其他应用程序中使用的包？
【发布时间】：2018-05-10 14:45:43
【问题描述】：

我正在使用 webpack 和 babel 来构建我的应用，并且应用在 bundle.js 文件中成功构建。

我有包含此代码的 index.jsx 文件

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('app'));

App 组件加载了一堆其他组件。

我在同一个应用程序中有 index.html 文件。

<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

我正在从系统目录打开 index.html 文件，直接在浏览器中，应用程序运行良好。

我想要做的是使用 bundle.js 文件并将我的脚本加载到另一个 html/javascript 应用程序中，该应用程序在其中运行相同的应用程序。

我发现了这个Writing embeddable Javascript plugin with React & Webpack 链接，它显示了他是如何设法使用它的。

他使用的地方

export const init = (config) => {
  ReactDOM.render(<MyReactApp config={config} />, someSelector);
}

如何转换我的 index.jsx 文件，以便可以在另一个应用程序中使用，就像它在回答给出的链接时使用的方式一样。

【问题讨论】：

使用 UMD 库：bob.yexley.net/umd-javascript-that-runs-anywhere 和 webpack.js.org/configuration/output
我已将其添加到 webpack.config.js 文件中作为输出：{ path: BUILD_DIR, filename: 'bundle.js', library: 'MyApp', libraryTarget: 'umd', umdNamedDefine: true , },

标签： javascript reactjs webpack babeljs

【解决方案1】：

就像他在另一个答案中所说的那样

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.yourExportedFunction();
</script>

但这只是为了使用导出的函数。看起来你想让你的整个应用程序在其他应用程序的不同 index.html 文件中呈现，所以在你需要的其他应用程序的 index.html 中：

<div id="app"></div>

和

<script src=".path/to/other/project/bundle.js" type="text/javascript"></script>

然后应用程序将在您的 div#app 标记中呈现，因为这就是您的库所做的：

render(<App />, document.getElementById('app'));

【讨论】：

它的工作，但我共享链接，因为我想修改我的 index.jsx 或 html 文件来接收一些参数，从我想使用的地方发送。就像在链接中
然后你必须像他一样导出执行渲染的函数，并将你的参数传递给函数，如他的示例所示。