Discussion :

[moimp]

Bonjour,
J'ai un script d'affichage de calendrier qui fonctionne:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const
	en = {
		weekDays:	['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
		,monthes:	['January','February','March','April','May','June','July','August','September','October','November','December']
		,week:		'Week'
	}
	,fr = {
		weekDays:	['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']
		,monthes:	['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre']
		,week:		'Semaine'
	}
	,de = {
		weekDays:	['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag']
		,monthes:	['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']
		,week:		'KW'
	}
	,es = {
		weekDays:	['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado']
		,monthes:	['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']
		,week:		'Semana'
	}
	,it = {
		weekDays:	['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato']
		,monthes:	['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre']
		,week:		'Settimana'
	}
	;
 
// NE PAS OUBLIER D AJOUTER LES NOUVELLES LANGUES ICI
const
	data = {en, fr, de, es, it};
 
// LA CONSTANTE lang DOIT ËTRE FOURNIE A PARTIR DE PHP.
const params = data[lang];
 
// ... suite du code

Pour plus de souplesse et éviter d'avoir à modifier le code, je voudrais externaliser les textes.
Après avoir cherché, j'ai testé ceci qui ne fonctionne pas:

Code :

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

1
2
3
console.log(lang);	// défini en php
const params = require('lang/'+lang+'.json');
console.log(params:"week");

Contenu d'un fichier de langue:

Code :

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

1
2
3
4
5
{
	"weekDays":	["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"]
	,"monthes":	["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]
	,"week":	"Semaine"
}

Une des questions que je me pose est de savoir comment préciser le chemin du fichier. Sinon, je ne vois pas ce qui ne fonctionne pas. Par ailleurs la console de Edge me renvoie plein de problèmes qui ne m'intéressent pas dans l'immédiat sur l'en-tête mais n'affiche pas ce que je lui demande.

[ProgElecT]

Salut
const params = require('lang/'+lang+'.json'); ton code
const params = require('./lang/'+lang+'.json'); peut être

[moimp]

J'ai avancé: La fonction require() n'est pas reconnue par JS. Après avoir poursuivi mes recherches, je pense qu'il faut utiliser import(). J'ai trouvé ceci ici:
import params from 'fr.json' assert { type: 'json' };alert(params); qui provoque une erreur:

Unexpected identifier 'assert'

En me reportant à la documentation MDN, j'ai essayé plusieurs alternatives avec import() dont const params = import('fr.json'); qui provoque l'erreur suivante:

clock.js:51 Promise*{<rejected>: TypeError: Failed to resolve module specifier 'fr.json'
at http://bibli.local//js/clock.js:50:16}[[Prototype]]: Promise[[PromiseState]]: "rejected"[[PromiseResult]]: TypeError: Failed to resolve module specifier 'fr.json'
at http://bibli.local//js/clock.js:50:16
clock.js:50 Uncaught (in promise) TypeError: Failed to resolve module specifier 'fr.json'
at clock.js:50:16
(anonymes) @ clock.js:50

Dans ce message la position 50:16 correspond au mot clef import et je ne sais pas interpréter ce message.
Pour mes essais, j'ai placé mes fichiers de langue .json dans le répertoire root/js/ avec mon script.

[moimp]

Complément au message précédent:
J'ai modifié le nom du fichier à importer comme ceci: import('./fr.json').
Conséquences:
L'erreur précédente a disparu.
Une nouvelle erreur apparaît:

clock.js:51 Promise*{<pending>}
fr.json:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.
bibli.local/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://bibli.local//js/fr.json

Je comprends cette erreur mais comment la résoudre?

[moimp]

Bonjour à tous,
Je pense que mon message précédent est mal posé et mal conçu.
Comme j'en ai assez de patauger, je repose donc ma question différemment:
Quelle est la meilleure méthode pour importer un fichier langue .js ou .json dans un script fichier.js?

[Pytet]

Bonjour,

Le plus simple pour charger un fichier json dans un environnement web est de passer par l'API Fetch.

Sinon, pour contourner ton erreur, tu peux importer un fichier js qui exporte le contenu json.

index.html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>
 
    <script src="index.js" type="module"></script>
  </body>
</html>

index.js :

Code javascript :

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

1
2
import data from './data.js';
console.log(data);

data.js :

Code javascript :

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

1
2
3
4
5
6
export default
{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Tu peux regarder ce guide qui propose une solution possible sans bibliothèque pour la traduction en javascript et d'autres solutions avec des bibliothèques js : https://phrase.com/blog/posts/step-s...-localization/

[moimp]

J'ai testé ton exemple. Il fonctionne avec un nom de fichier écrit en dur ".js/fr.js". Il ne fonctionne plus si le nom du fichier est une variable.
J'ai essayé comme ceci:

Code :

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

1
2
3
4
5
6
console.log(lang);
const filename = './'+lang+'.js';
console.log(filename);
const params = import(filename);
console.log(params);			// Promise
console.log(params.weekDays);		// undefined

Ce code provoque une erreur à la lecture de 'params'. Après des recherches sur MDN, je reste complètement noyé.

[domi65]

« Ce code provoque une erreur à la lecture de 'params'
console.log(params.weekDays); // undefined »

undefined n'est pas à proprement parler une erreur.

Console.dir(params) , qu'est-ce que ça donne ?

[moimp]

@domi65: Je n'ai pas essayé parce que console.log(params) me renvoie un objet promise et impose de travailler en asynchrone. J'y reviendrai peut-être après si nécessaire.

Par ailleurs, j'ai trouvé une solution sur un autre forum en modifiant le html comme ceci:

Code :

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

1
2
3
<script>const lang = "fr";</script>
<script src='js/lang/fr.js'></script>
<script type='module' src='js/clock.js'></script>

ce qui me permet d'utiliser directement la constante lang et mon fichier langue dans 'clock.js'. La question qui se pose maintenant est: Est-ce qu'il y a un risque à fonctionner ainsi?

@pytet: Je dois encore approfondir le lien que tu m'as donné.

[Pytet]

Il ne semble pas y avoir plus de risques avec ta dernière solution (les fichiers de traductions sont publiques et sans données confidentielles je suppose).

Tu peux récupérer les données via la propriété default de la promesse retournée par import() si le fichier fr.json contient uniquement un export default.

lang/en.js :

Code :

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

1
2
3
4
5
6
export default
{
    weekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    monthes: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    week: 'Week'
}

lang/fr.js

Code :

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

1
2
3
4
5
6
export default
{
    weekDays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    monthes: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    week: 'Semaine'
}

index.js :

Code :

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

1
2
3
4
5
6
let lang = 'en';
 
let module = await import('./lang/' + lang + '.js');
let translations = module.default;
 
console.log(translations);

[moimp]

Merci!