Question

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

我有index.jsx文件，其中包含此代码

showCurrentThresholds()

App组件已经加载了许多其他组件。

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

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

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

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

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

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

他使用的地方

<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.jsx文件，以便可以在另一个应用中使用，就像在回答链接时使用的那样。

Answer 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'));

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

1 个答案: