Ajout librairie JS avec Node

Alex54 · 8/1/22

Bonjour,

Je débute avec l’utilisation de Node JS pour gérer les bibliothèques JS côté client, et je bloque sur quelque chose qui parait pourtant simple.

Je souhaite tester l'exemple de cette bibliothèque : https://github.com/vasturiano/timelines-chart
Le support Planet Hoster a donc installé Node JS et j'ai fait la manip pour ajouter Node JS sur mon hébergement.

Lorsque je fais : npm install timelines-chart --save
Tout s'installe bien, à la racine de l'hébergement, au même niveau dque le répertoire public_html

Ensuite, dans public_html je place un index.html qui contient les lignes suivantes :

HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    </head>
    <body>

        <script>
           import TimelinesChart from 'timelines-chart';

            const parseTime = d3.timeParse("%d/%m/%Y"); // Permet de formater les dates à la francaise

            let color = d3.scaleOrdinal()
                    .domain(["Test", "Test 2", "Test 3"])
                    .range(["#FF0000", "#009933", "#0000FF"]);

            myData = [
                {
                    group: "group1",
                    data: [
                        {
                            label: "Ligne 1",
                            data: [
                                {
                                    timeRange: [parseTime("25/01/2022"), parseTime("25/03/2022")],
                                    val: "Test"
                                },
                                {
                                    timeRange: [parseTime("10/06/2022"), parseTime("10/07/2022")],
                                    val: "Test 2"
                                }
                            ]
                        },
                        {
                            label: "Ligne 2",
                            data: [{
                                    timeRange: [parseTime("05/01/2022"), parseTime("25/02/2022")],
                                    val: "Test 3"
                                }]
                        },
                    ],
                }
            ]

            TimelinesChart()(document.body).zQualitative(true).timeFormat("%d/%m/%Y %B").maxLineHeight("34").rightMargin("300").zColorScale(color).data(myData);


        </script>
    </body>
</html>

Ce code fonctionne si j'ajoute la librairie avec ses dépendences via les CDN, mais ca bloque lorsque j'essaye de faire l'ajout via Node JS, j'obtiens cette erreur : Uncaught SyntaxError: import declarations may only appear at top level of a module

Je ne conprends pas vraiment comment se fait le lien avec les fichiers de la librairie qui ont été installé par Node, et je ne trouve rien qui puisse m'aider à comprendre comment gérer les fichier JS via Node pour le coté client.

Comment puis ajouter les fichiers JS dans un tel cas ? Si vous avez un bon tuto à ce sujet, je suis preneur aussi ;-)

Ajout librairie JS avec Node

Alex54

New Member