Il y a une tâche pour moi, c'est un site Web, et nous ne pouvons insérer qu'un seul JS_SCRIPT en HTML. Alors, y a-t-il un moyen d'y arriver? Je veux ajouter des scripts par document.createElement. Mais cela n'a pas fonctionné.

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

Y a-t-il un mot clé à rechercher? Merci beaucoup

0
Samtoo 20 nov. 2018 à 11:02

4 réponses

Meilleure réponse

Vous pouvez également utiliser une bibliothèque de bundles comme webpack ou browserify. Cela ne générera qu'un seul fichier js pour votre application React qui comprend toutes les bibliothèques, le code, les css, etc. et vous pourrez ensuite l'importer dans le html de votre site Web. À la fin, vous vous retrouverez avec un seul fichier appelé (par exemple) bundle.js (qui comprend déjà les scripts react-dom et react) et vous pouvez l'importer comme ceci dans votre html:

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

Il n'est donc pas nécessaire de générer votre propre js qui inclut tout comme le script test.js que vous avez. L'utilisation de ces bundles présente également d'autres avantages, tels que la réduction de la taille et certaines autres transformations pour les anciens navigateurs.

Remarque: L'utilisation de webpack n'est pas simple, consultez les documents officiels et ce didacticiel est facile et utile.

0
c-chavez 20 nov. 2018 à 09:28

Vous pouvez toujours utiliser require.js pour regrouper tous vos fichiers javascript dans un seul gros fichier javascript

Je pense que vous devez inclure 2 balises de script pour créer une application d'une minute sans outils de construction, comme expliqué here par Dan abramov

Et cela fonctionne avec votre code voir l'exemple ici tout en insérant un seul JS_SCRIPT en HTML

0
Tal Avissar 20 nov. 2018 à 08:44

Mise à jour: Webpack va bien!


/ * J'ai obtenu la réponse, devrait changer ./build.js, cela fonctionne bien pour moi. * /

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);
}
0
Samtoo 22 nov. 2018 à 01:58

Essaye ça. Peut-être pas la meilleure solution mais fait le travail.

document.write('<script src="https://unpkg.com/react@16.6.3/umd/react.production.min.js"><\/script>');
0
Alex Oleksiiuk 20 nov. 2018 à 08:18