Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Utilisation de webpack pour exécution sur ancien navigateurs
    Bonjour,
    Je dois développer une application web sur une TV LG. Je suis débutant en dev web et je me perds dans toutes les technos qui existent...
    Pour que la tele lance l'application, je fais un .zip avec les fichiers de l'appli web. J'arrive à lancer une page web très simple. (index.html avec du JS "simple")
    Je me suis rendu compte que le navigateur de la tele n'est pas du tout le meme que mon Firefox ou mon Chrome. Les gars de chez LG m'ont dit que le navigateur est basé sur Chromium V53. Donc en cherchant un peu, j'ai vu qu'il fallait TRANSPILER mon code si j'utilisais du Javascript "récent". Par exemple "let" ou function*
    Ma question enfin:
    Webpack sert-il à Transpiler le code? Si oui, avec quels plugins? Comment compiler du code compatible pour la TV? Je suis perdu...

    Merci de votre aide.

  2. #2
    Modérateur

    Bonjour,
    regarde plutôt du côté de Babel pour convertir de l'ES6 vers de l'ES5.

  3. #3
    Membre habitué
    OK
    Merci NoSmoking.
    Dans package.json pour l'instant j'ai:

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    "babel": {
      "presets": [
        [
          "env"
    ]
      ]
    }


    et dans le webpack.config.js j'ai:
    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
    module.exports = {
        // 1
    entry: './src/index.js',
    // 2
    output: {
            path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
    },
    // 3
    devServer: {
            contentBase: './dist'
    },
    module: {
            rules: [
                {
                    test: /\.(js)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
                }
            ]
        },
    resolve: {
            extensions: ['*', '.js']
        },
    };


    J'ai besoin de webpack pour pouvoir deployer le tout en minifiant, et en transpilant. Webpack sert à ca non?
    En utilisant ces deux fichiers de config, le code peut s'exécuter sur quels navigateurs? Je ne comprends pas trop...

  4. #4
    Expert éminent sénior
    Comme dit plus haut, Babel sert à transpiler du code dans une certaine version de JavaScript, vers une autre version de JavaScript.

    Généralement on transpile du code d'une version récente du langage vers du JS en version 5 qui est supporté par tous les navigateurs.

    Webpack est un outil différent qui sert à en particulier à générer un livrable, c'est à dire une version déployable de ton application. Comme c'est Webpack qui analyse ton code et réalise la génération du livrable, il a besoin de savoir piloter Babel (via son loader) pour transpiler ton code source dans une version récente de JS vers le livrable en version 5 de JS.

    Par convention le livrable est généré dans la répertoire dist/ de ton code source, c'est ce répertoire et uniquement ce répertoire qu'il faudra ensuite déployer sur ton serveur web.

    Pour pouvoir t'aider il nous faut ton package.json au complet car en fonction des versions de tes dépendances la manière de faire varie grandement.
    Un problème avec Git ? Essayez la FAQ, sinon posez votre question sur le forum.



    "Toute personne croyant qu'une croissance exponentielle peut durer indéfiniment dans un monde fini est soit un fou, soit un économiste."
    Kenneth E. Boulding

    "Les richesses naturelles sont inépuisables, car, sans cela, nous ne les obtiendrions pas gratuitement. Ne pouvant être ni multipliées ni épuisées, elles ne sont pas l’objet des sciences économiques."
    Jean-Baptiste Say, Traité d'économie politique, 1803.

    "/home/earth is 102% full ... please delete anyone you can."
    Inconnu

  5. #5
    Membre habitué
    Merci!
    Merci à tous.
    J'ai pu configurer pour transpiler le code avec babel. Je trouve toutefois que les tutos sur internet sont super nombreux et que comme la techno avance tous les mois, pas facile de trouver les bons paramètres à utiliser...

###raw>template_hook.ano_emploi###