Installation d'un package via npm

**rafoim** · 17/06/2022, 00h44

Bonjour,

Voilà, je suis coincé au tout début d'un cours portant sur la librairie three.js ( librairie dédiée à la 3D). Je veux installer three.js via npm.
J'ai exécuté à la lettre les instrcutions disponibles ici:
Discover three.js
https://discoverthreejs.com

J'ai donc appliqué:
npm init
npm install --save three.js.
Je vois bien un dossier node-modules dans mon projet avec three.js dedans ( je ne peux pas coller de capture d'écran).
Voici mon code basique juste pour tester l'installation:
HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test three.js</title>
  </head>
  <body>
    <div id="three-container">
      <canvas></canvas>
    </div>
  </body>
  <script type="module" src="script.js"></script>
</html>

Js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
import {Camera} from 'three'
 
const container = document.getElementById('three-container');
console.log(container);

Voilà: mon navigateur, lancé via live server depuis vs code, me dit qu'il n'accède pas au module three.js. Plus précisément, j'ai ça:

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.

A noter que, dans la doc, il est bien noté d'importer directement ainsi: import {Camera} from 'three'

Veuillez me croire lorsque je vous dis que je cherche déjà depuis mal de temps. C'est sans doute une erreur idiote mais je ne vois pas.
Merci d'avance pour votre aide.

**NoSmoking** · 17/06/2022, 17h48

Bonjour,

Dans le navigateur, import doit avoir une URL relative ou absolue.

/	par rapport à la racine, /file.js
./	dans le même répertoire, le . (point) défini l'emplacement courant, ./file.js
../	on remonte d'un répertoire, ../modules/files.js

Le plus simple est de faire des essais et de regarder l'erreur que tu auras dans la console.

**rafoim** · 18/06/2022, 10h36

Bonjour,

Tout d'abord, merci pour ta réponse. Le souci est que je ne suis pas sûr de la comprendre.

Envoyé par NoSmoking

Bonjour,

Dans le navigateur, import doit avoir une URL relative ou absolue.

J'ai fait des recherches pour comprendre cette phrase. Je pense que quand tu dis "dans le navigateur", tu te réfères à l'environnement d'exécution js: navigateur vs node.js. J'ai bon?
Mon objectif est bien de faire fonctionner dans le navigateur et je crois que tu me conseilles d'utiliser les "relative URL" plutôt que les "module specifiers", si j'ai bien compris mes lectures.
Mais dans ce cas, pour chaque import d'un élément de three.js, je dois spécifier le chemin exact menant à l'élément. J'ai bon?

Dans ce cas, c'est bien peu pratique. En lisant la doc, il semble que je doive utiliser un mécanisme de "bundling" de type webpack pour regrouper tout le code javascript dans un seul fichier. A ce moment-là, il n'y aura plus de souci avec la "résolution des modules". Je mets entre guillemets pour souligner le fait que je maîtrise mal mon propre propos.

Bon, je vais essayer la solution qui consiste à importer le code depuis CDN. Cela semble plus adapté à mon niveau.
J'ai peur que la solution "webpack" soit lourde et je ne trouve pas de ressource simple m'expliquant comment m'y prendre.

Là où je suis surpris, c'est que le livre discover three.js que je mentionne à l'origine semble faire l'impasse sur ces difficultés. Peut-être ai-je mal compris quelque chose.

Merci d'avance pour ceux/celles qui prendront le temps pour me dire si je suis dans le juste.

Raphaël

**rafoim** · 18/06/2022, 19h39

Bon, je me réponds à moi-même.
Je pense que ce que j'ai écrit dans le message précédent était juste.
J'ai trouvé dans les annexes du livre dont j'ai parlé certaines confirmations:
https://discoverthreejs.com/book/app...cript-modules/
Il faut bien un système type webpack pour utiliser des imports directs de modules sans préciser le chemin.

Merci encore à noSmoking qui m'a aiguillé.

Raphaël

Installation d'un package via npm

JavaScript

Discussions similaires

Partager

Partager