Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Webpack e babel, IE11

  1. #1
    Utente di HTML.it L'avatar di SkyLinx
    Registrato dal
    Jun 2017
    residenza
    Espoo, Finland
    Messaggi
    60

    Webpack e babel, IE11

    Sto usando da poco webpack con una Rails app (usando la webpacker gem) e sono relativamente niubbo con 'sta roba. Ho bisogno di essere in grado di testare l'app anche con IE11 ma non funzia a causa di ES6 syntax che non viene traspilata in ES5. C'e' qualche configurazione in particolare che bisogna avere per poter ottenere JS compatibile con IE11?

    Grazie in anticipo.
    The only way to stay sane is to go a little crazy. - Susanna Kaysen

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Non ho ben capito dalla tua domanda se hai implementato o meno babel nella tua app. In ogni caso se lo hai fatto è stato fatto in maniera sbagliata, in quanto se configurato correttamente ti trasforma il tuo codice es6 in es5.

    Guarda questa guida che è molto semplice, sono poche righe di codice: https://medium.com/@SunnyB/how-to-co...l-1b533d31a169

    Purtroppo io di rails non ci capisco nulla ma in teoria usando webpacker non dovrebbe cambiare nulla rispetto a js. Ovviamente ricordati di includere nella tua app il file es5 generato da babel, altrimenti se usi quello es6 continuerà a non funzionare.

  3. #3
    Utente di HTML.it L'avatar di SkyLinx
    Registrato dal
    Jun 2017
    residenza
    Espoo, Finland
    Messaggi
    60
    Ciao, e grazie per la risposta. Webpacker by default include la configurazione di babel. Avevo gia' provato le modifiche col preset suggerito nel post che hai linkato, ma mentre tutto funziona senza problemi in Chrome/Safari/Firefox/Edge, con IE11 mi da' errori di sintassi a causa di keywords come "Class", la nuova sintassi per le funzioni etc. Quindi sembrerebbe che il JS non venga trasformato in ES6 come dovrebbe.... Purtroppo come dicevo sono niubbo con ste cose e seppure abbia provato un bel po' di roba trovata in rete, non so cos'altro provare
    The only way to stay sane is to go a little crazy. - Susanna Kaysen

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Mmm è strano, tanto per fare un tentativo potresti provare ad utlizzare babel-polyfill per vedere se ti risolve il problema

  5. #5
    Utente di HTML.it L'avatar di SkyLinx
    Registrato dal
    Jun 2017
    residenza
    Espoo, Finland
    Messaggi
    60
    Gia' provato, e se setto debug: true in .babelrc mi mostra la lista di tutti i polyfill.
    The only way to stay sane is to go a little crazy. - Susanna Kaysen

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Allora temo di essere a corto di idee. Purtroppo le mie conoscenze di js non sono il massimo.

    In caso potresti provare a fare la stessa cosa solo in js escludendo la parte ruby, giusto per vedere se babel continua a dare errori. In questo modo almeno escluderesti problemi di compatibilità con il plugin webpacker.

  7. #7

  8. #8
    Utente di HTML.it L'avatar di SkyLinx
    Registrato dal
    Jun 2017
    residenza
    Espoo, Finland
    Messaggi
    60
    Grazie anche a te Luca, avevo provato anche quello ma non funzionava comunque...

    Ho trovato il problema (nel caso capitasse ad altri con Rails/webpacker): in pratica, nella configurazione babel di default che viene con webpacker la directory node_modules viene ignorata da babel. Il problema nel mio caso e' che una libreria che uso, AutoNumeric, ha sintassi ES6 e dunque, essendo node_modules ignorata, anche quella libreria veniva ignorata e percio' codice ES6 andava a finire nel bundle finale, causando problemi con IE11. Non era neanche un problema di preset dunque, infatti alla fine ho lasciato quello di default di webpacker ("env").

    Nell'environment.js, dove posso aggiungere custom configs, ho messo le linee in bold:

    codice:
    const { environment } = require('@rails/webpacker')
    
    
    const babelLoader = environment.loaders.get("babel")
    babelLoader.exclude = /node_modules\/(?!(autonumeric)\/).*/
    
    
    module.exports = environment
    In questo modo faccio override del setting "exclude" con una regex diversa che mi include autonumeric (ed eventuali altri). Ho fatto cosi' perche' non ho trovato come modificarlo direttamente nel .babelrc, che riporto cosi' come e' adesso qui sotto, per riferimento.

    Ho dovuto aggiungere
    - dei plugin per la conversione ES6>>ES5 di alcune cose
    - alcuni polyfill da core-js/element-closest/mutation-observer-inner-html-shim per far funzionare anche Stimulus.js con IE11

    Adesso tutto sembra funzionare come atteso. Grazie ancora ad entrambi per i suggerimenti!


    codice:
    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": [
              "> 1%"
            ],
            "uglify": true
          },
          "useBuiltIns": true,
          "debug": false
        }],
      ],
    
    
      "plugins": [
        "syntax-dynamic-import",
        "transform-object-rest-spread",
        ["transform-class-properties", { "spec": true }],
        "transform-es2015-classes",
        "transform-es2015-arrow-functions",
        "transform-object-assign"
      ]
    }
    The only way to stay sane is to go a little crazy. - Susanna Kaysen

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.