2017-10-20 5 views
0

Je teste-React et je suis boilerplate essaie de charger des fichiers javascript dans le fichier app/index.html:React boilerplate ne charge pas les fichiers js dans le index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <!-- The first thing in any HTML file should be the charset --> 
    <meta charset="utf-8"> 
    <!-- Make the page mobile compatible --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Allow installing the app to the homescreen --> 
    <link rel="manifest" href="manifest.json"> 
    <meta name="mobile-web-app-capable" content="yes"> 

    <script type="text/javascript" src="myJScriptFile1.js"></script> 
    <script type="text/javascript" src="myJScriptFile2.js"></script> 
    </head> 
    <body> 
    <!-- Display a message if JS has been disabled on the browser. --> 
    <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript> 

    <!-- The app hooks into this div --> 
    <div id="app"></div> 
    <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) --> 
    </body> 
</html> 

Ceci est la valeur par défaut index.html fichier. Je courais avec npm ou yarn et la console du serveur me montre pas d'erreur, mais ma console de navigateur continue à me dire:

Uncaught SyntaxError: Unexpected token < 

comme ça, il n'y a plus d'erreur. Ces fichiers javascript fonctionnent correctement car je les utilise dans un autre projet basé sur React, et je les appelle dans le fichier index.html. La console imprime cette erreur par fichier. Si je fais le suivi de l'erreur, cela me mène au fichier .js correspondant.

Après presque une semaine de recherche sur le web, je n'ai pas trouvé de solution. Alors c'est ça, est-ce que quelqu'un a une idée sur la façon de résoudre ça?

+0

Je suppose que vous demandez une ressource manquante, renvoyant ainsi une page 404-html. – Caramiriel

+0

@Caramiriel c'était une erreur de frappe ... mais cela n'a pas d'importance en raison de la myJScriptFile1.js renvoie la même erreur. – assembler

+0

Pouvez-vous poster votre code js? –

Répondre

0

Eh bien, je me réponds. J'avais besoin d'un peu plus de recherche sur webpack. Je y arrive en webpack:

installé npm i add-asset-html-webpack-plugin -D

puis, dans le fichier de configuration webpack, sous plugins j'ai ajouté:

new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })

et c'est tout.