Question

对我来说，这是一个任务，它是一个网站，我们只能在HTML中插入一个JS_SCRIPT。那么有什么办法可以实现呢？我想通过document.createElement添加脚本。但这没用。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        
    </title>
    <link rel="stylesheet" href="">
</head>
<body>
           
    <script src="./build/test.js"></script>

</body>
</html>

./ build / test.js

var app = document.createElement('div');
app.id = 'root';

document.querySelector('body').appendChild(app);

(function() {
  var hm = document.createElement("script");
  hm.src = "https://unpkg.com/react@16.6.3/umd/react.production.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

(function() {
  var hm = document.createElement("script");
  hm.src = "https://unpkg.com/react-dom@16.6.3/umd/react-dom.production.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

(function() {
  var hm = document.createElement("script");
  hm.src = "./build/jsx.bundle.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

./ build / jsx.bundle.js

'use strict';

ReactDOM.render(React.createElement(
    'h1',
    null,
    'hello wolrd'
), document.querySelector('#root'));

有没有要搜索的关键字？非常感谢

Answer 1

尝试一下。可能不是最佳解决方案，但可以完成工作。

document.write('<script src="https://unpkg.com/react@16.6.3/umd/react.production.min.js"><\/script>');

Answer 2

您始终可以使用require.js将所有javscript文件捆绑为一个大的javascript文件

我认为您需要包含2个脚本标签来创建一分钟的应用程序，而无需构建工具，如Dan abramov解释here

它确实适用于您的代码，请参见示例here，同时在HTML中仅插入一个JS_SCRIPT

Answer 3

更新：Webpack很好！

/ * 我得到了答案，应该更改./build.js，这对我来说很好。 * /

var app = document.createElement('div');
app.id = 'root';

document.querySelector('body').appendChild(app);

(function() {
  var hm = document.createElement("script");
  hm.src = "https://unpkg.com/react@16.6.3/umd/react.production.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

(function() {
  var hm = document.createElement("script");
  hm.src = "https://unpkg.com/react-dom@16.6.3/umd/react-dom.production.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);

})();
// changed here
window.onload = function() {

  var hm = document.createElement("script");
  hm.src = "./build/jsx.bundle.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}

Answer 4

您还可以使用webpack或browserify之类的捆绑程序库。这只会为您的React应用生成一个js文件，其中包含所有库，代码，css等，然后您可以将其导入网站的html中。最后，您将仅得到一个名为（例如）bundle.js的文件（该文件已经包含react-dom和react脚本），您可以像这样将其导入到html中：

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

因此，无需生成自己的js，其中包含您所拥有的test.js脚本之类的所有内容。使用这些捆绑程序还有其他好处，例如最小化以及旧浏览器的其他一些转换。

注意：使用webpack并不简单，请看一下官方文档，this tutorial既简单又有用。

未定义ReactDOM

4 个答案: