Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#417 コメント 16 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
30/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
babel, javascript
領域
build-system, performance

調査の方向性

最小限の再現手順から始めます。browserslist の設定と依存関係を package.json に追加し、その後 ember build -e production を実行します。生成された my-app.js を、リンクされている input.js および output.js と比較し、private メソッドのエラーも確認します。設定した Chrome と Firefox のターゲットで、サポートされているネイティブ構文が保持され、示されている予期しない変換が回避されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
151
フォーク
115
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

emberjs/ember-cli-babel のほかの issue

emberjs/ember-cli-babel の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。