Webpack e babel, IE11

[SkyLinx]

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.

[M4V1]

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.

[SkyLinx]

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

[M4V1]

Mmm è strano, tanto per fare un tentativo potresti provare ad utlizzare babel-polyfill per vedere se ti risolve il problema

[SkyLinx]

Gia' provato, e se setto debug: true in .babelrc mi mostra la lista di tutti i polyfill.

[M4V1]

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.

[lucavizzi]

Già vista questa discussione?
https://stackoverflow.com/questions/...answers-header

[SkyLinx]

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:

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!

{
  "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"
  ]
}