Je commence le développement Web et je rencontre des difficultés pour importer les modules que j'ai installés à l'aide de npm i MODULE -S dans mon .html dans un script . Ma structure de fichiers ressemble à:
CONFIGURATION:
GET http://localhost:49160/js/libs/jquery/ net::ERR_ABORTED 404 (Not Found)
le fichier index.html est très simple et ressemble à:
import $ from './libs/jquery';
et le fichier index.mjs :
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found) GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found) GET http://localhost:49160/node_modules/jquery net::ERR_ABORTED 404 (Not Found)
et pour compléter le fichier server.mjs
import $ from '.jquery'; import $ from './jquery'; 'import $ from '../../node_modules/jquery';
PROBELM
lorsque j'exécute node --experimental- modules server / server.mjs ma page se charge et je peux la visiter dans localhost: 8080 , mais lorsque j'ouvre les outils de développement dans chrome, l'erreur suivante s'affiche :
Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".
Tentative de résolution
1) J'ai changé en instruction d'importation dans le index.mjs doit être:
// const path = require('path');
import path from 'path';
import express from 'express';
const app = express();
const __dirname = path.resolve();
const publicPath = path.join(__dirname, '/public');
app.use(express.static(publicPath));
const port = process.env.PORT || 8080;
app.set('port', port);
app.listen(app.get('port'), () => {
console.log(`listening on port ${port}`);
});
qui renvoie le message suivant:
import $ from 'jquery';
2) J'ai tenté de copiez le dossier jquery du répertoire node_modules dans le répertoire libs et relancez de sorte que index.js ne dispose que le code suivant:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON and AJAX</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Objects</button>
</header>
<div id="animal-info"></div>
<script type="module" src="js/index.mjs"></script>
<div id="msgid"></div>
</body>
</html>
mais J'obtiens l'erreur suivante:
project
|_ node_modules
|_ public
| |_ css
| |_ js
| | |_ libs
| | |_ index.mjs
| |_ index.html
|_ server
|_ server.mjs
EXTRA
Lorsque je suis la documentation sur le page Mozilla developer et développer mes propres modules tout fonctionne bien, mais quand j'essaye avec modules tiers Je suis présenté avec une série d'erreurs.
3 Réponses :
L'importation correcte est
import * as $ from 'jquery';
la console affiche: Uncaught TypeError: Impossible de résoudre le spécificateur de module "jquery". Les références relatives doivent commencer par "/", "./" ou "../". Lorsque j'essaye d'ajouter ces chemins, je reçois les mêmes messages d'erreur que dans mon message d'origine.
L'installation de packages avec npm est mieux adaptée à un environnement de construction tel que webpack. Je ne suis pas sûr de la structure de votre dossier, mais commencez par une application React seed pour vous aider à démarrer. Abandonnez le jQuery.
Si vous voulez simplement jouer avec jQuery, le lien vers le CDN que vous avez commenté fonctionnera très bien. Pas besoin de NPM.
@AdrianBrand TypeScript ne compilera pas, s'il utilise jQuery, faisant référence à CDN. L'installation de types n'aide pas, TypeScript est probablement toujours à la recherche de jQuery.js
TLDR;
importer $ depuis '/js/libs/jquery/dist/jquery.js'
ou
importer $ depuis './libs/jquery/dist/jquery.js'
Il y a deux problèmes différents dans vos deux tentatives.
importer $ de 'jquery';
Ce type d'importation par nom ne fonctionnera pas car votre navigateur ne sait pas où rechercher jquery. Selon le navigateur, si vous avez un fichier jquery.js à la racine (/ public) de votre serveur, cela pourrait fonctionner, mais aucune garantie.
importer $ depuis '.jquery';
importer $ de './jquery';
'importer $ de' ../../node_modules/jquery ';
Ce sont tous, malheureusement, le mauvais chemin. Les modules ES6 sont chargés à partir du fichier, et non d'un répertoire, et package.json est ignoré. Donc, tout cela aurait besoin de dist / jquery.js à la fin pour avoir une chance. De plus, en fonction de la structure de votre répertoire, aucun n'est correct (en supposant que jquery dir se trouve dans / public / js / libs). Le second est le ferme mais il manque ./libs au début.
CDN
/// <reference types="jquery" />
Installation de type NPM
npm install @types/jquery --save-dev
Référence TypeScript
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
La clé est de réaliser que jQuery est accessible à travers une portée globale https://www.typescriptlang.org/ docs / handbook / declaration-files / library-structures.html # global-libraries
et peut être référencé via le mot-clé reference au lieu de import code>
https: // www. typescriptlang.org/docs/handbook/declaration-files/library-structures.html#dependencies-on-global-libraries
HTTP 404 n'a rien à voir avec les modules - votre fichier n'est pas disponible par le chemin à partir duquel vous essayez de charger.
Voyant que vous êtes très nouveau dans le développement Web, pourquoi perdez-vous votre temps à apprendre une bibliothèque héritée comme jQuery? Vous devriez passer votre temps à apprendre un cadre de développement Web moderne comme Angular, React ou Vue. Ne perdez pas votre temps à apprendre une méthode aussi obsolète.
@Adran Brand, l'objectif est d'apprendre React. Je viens de choisir
jQuerycomme exemple de module en pensant que cela faciliterait l'explication ci-dessus, mais je ne peux pas importer un autre module tiers que j'installe en utilisantnpm install .