Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug] browserslist and targets have no effect on the output of the build (potential performance problems as well)

Abierto
  • ¿Algo no está bien?
#417 16 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
babel, javascript
Área
build-system, performance

Línea de trabajo

Comienza con los pasos mínimos para reproducirlo: añade la configuración de browserslist y la dependencia a package.json, y después ejecuta ember build -e production. Compara el archivo my-app.js generado con los archivos input.js y output.js enlazados, incluido el error del método privado. Se considera completado cuando los destinos de Chrome y Firefox configurados conservan la sintaxis nativa compatible y evitan la transformación inesperada mostrada.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Originally reported here: https://github.com/emberjs/ember.js/issues/19790

🐞 Describe the Bug

After some investigation here: https://stackoverflow.com/questions/69547969/with-babel-how-do-i-not-compile-away-class-properties-since-browsers-support
And a minimal babel repro here: https://github.com/NullVoxPopuli/babel-transpilation-tests
I expect that setting my targets to last 1 firefox versions would allow me to keep native class properties. and only transpile what is decororated.

I believe fixing this could provide a bit of a boost to everyone's build times. Today all class properties are transpiled to a time when class properties were not implemented in the browser).

🔬 Minimal Reproduction
  • ember new my-app
  • cd my-app
  • remove safari from targets, leaving only last 1 Chrome versions and last 1 firefox versions
  • add browserslist to package.json
  • add browserslist as devDependency
  • yarn browserslist --update-db
  • run ember build -e production
  • in the my-app.js, I expect all occurrences of rootURL to be involved in an assignment, rather than a function call.

result: https://github.com/NullVoxPopuli/repro-for-emberjs-19790

😕 Actual Behavior

Living in the dark ages

🤔 Expected Behavior

Utilize support for native properties, private properties, methods, etc.

🌍 Environment
  • Ember: - CLI 3.28.0
  • Node.js/npm: -14.17.6
  • OS: - n/a
  • Browser: - n/a
➕ Additional Context

See the comparison between these two files:

Input: https://github.com/NullVoxPopuli/babel-transpilation-tests/blob/main/input.js
Output: https://github.com/NullVoxPopuli/babel-transpilation-tests/blob/main/output.js

This is correct.
But when I add that input file to ember, I get this for the output:

/home/nullvoxpopuli/Development/tmp/my-app/my-app/input.js: Class private methods are not enabled.
  2 |   #a = 'hi';
  3 |
> 4 |   get #b() {
    |   ^
  5 |     return 'hello' + this.#a;
  6 |   }
  7 |

which... I guess is unrelated, but should still be fixed. Now, If I change the private methods/getters to public:
I get this mess:

  var e, t, r
  function n(e, t, r) {(function (e, t) {if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object")})(e, t), t.set(e, r)} function i(e, t) {
    var r = function (e, t, r) {
      if (!t.has(e)) throw new TypeError("attempted to " + r + " private field on non-instance")
      return t.get(e)
    }(e, t, "get")
    return function (e, t) {
      if (t.get) return t.get.call(e)
      return t.value
    }(e, r)
  } r = new WeakMap, e = class {
    constructor() {
      var e, i, a, l
      n(this, r, {writable: !0, value: "hi"}), e = this, i = "g", l = this, (a = t) && Object.defineProperty(e, i, {enumerable: a.enumerable, configurable: a.configurable, writable: a.writable, value: a.initializer ? a.initializer.call(l) : void 0})
    } get b() {return "hello" + i(this, r)} get c() {return this.b}
  }, a = e.prototype, l = "g", o = [f], u = {configurable: !0, enumerable: !0, writable: !0, initializer: null}, p = {}, Object.keys(u).forEach((function (e) {p[e] = u[e]})), p.enumerable = !!p.enumerable, p.configurable = !!p.configurable, ("value" in p || p.initializer) && (p.writable = !0), p = o.slice().reverse().reduce((function (e, t) {return t(a, l, e) || e}), p), d && void 0 !== p.initializer && (p.value = p.initializer ? p.initializer.call(d) : void 0, p.initializer = void 0), void 0 === p.initializer && (Object.defineProperty(a, l, p), p = null), t = p
  var a, l, o, u, d, p

which is way wrong.

Lenguaje dominante
JavaScript
Estrellas
151
Forks
115
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de emberjs/ember-cli-babel

Todos los issues de emberjs/ember-cli-babel

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.