Parcel: Private class fields

Created on 10 Aug 2019  路  2Comments  路  Source: parcel-bundler/parcel

Brave, Chrome and nodejs already support private class fields:

class C {
  #x;
  constructor(x) {
    this.#x = x;
  }
  x() {
    return this.#x;
  }
}
return new C(42).x() === 42;

Same time, neither vscode (https://github.com/Microsoft/vscode/issues/72867, https://github.com/microsoft/TypeScript/issues/9950) nor parcel supports private fields, an error is thrown

Unexpected character '#'

"browserslist" package.json directive doesn't help in this case.

Is there any way to unblock standard browser feature?

Question

Most helpful comment

unblock standard browser feature?

They are a Stage 3 Proposal, meaning that it's merely very likely that they will become part of the Javascript language.

Therefore, you need to explicitly enable a babel syntax plugin:
.babelrc:

{
    "plugins": ["@babel/plugin-syntax-class-properties"]
}

(Or https://babeljs.io/docs/en/babel-plugin-proposal-class-properties if you also want to transpile them for older Browsers).

Furthermore, the minifier terser that Parcel runs by default also doesn't support them yet ( see https://github.com/terser-js/terser/issues/349), so you need to pass the --no-minifier flag as well during building.

All 2 comments

unblock standard browser feature?

They are a Stage 3 Proposal, meaning that it's merely very likely that they will become part of the Javascript language.

Therefore, you need to explicitly enable a babel syntax plugin:
.babelrc:

{
    "plugins": ["@babel/plugin-syntax-class-properties"]
}

(Or https://babeljs.io/docs/en/babel-plugin-proposal-class-properties if you also want to transpile them for older Browsers).

Furthermore, the minifier terser that Parcel runs by default also doesn't support them yet ( see https://github.com/terser-js/terser/issues/349), so you need to pass the --no-minifier flag as well during building.

@mischnic, can i just shut up babel and dev without transpile ?

Was this page helpful?
0 / 5 - 0 ratings