Define doesn't apply to optionally chained variables

[hansottowirtz]

I would like to replace a?.b with a variable, but it's not possible yet to use define for this. I think it would be valid in every case to add this functionality.

Example:

echo 'console.log(a.b)' | npx esbuild --define:'a.b'="'x'" # console.log("x")
echo 'console.log(a?.b)' | npx esbuild --define:'a.b'="'x'" # console.log(a.b)

Would it be possible to implement this as well, or is there some kind of workaround available?

[hyrious]

echo 'console.log(a?.b)' | esbuild --define:a='{"b":"x"}'

var define_a_default = { b: "x" };
console.log(define_a_default?.b);

[evanw]

I don't have time to check right now, but I'd want to check how this feature behaves in other bundlers before implementing this (e.g. Webpack). Ideally esbuild would behave the same way.

[hansottowirtz]

echo 'console.log(a?.b)' | esbuild --define:a='{"b":"x"}'

This would work, but in my case the a object is large, and this approach means it can't be tree-shaken.

[hansottowirtz]

@evanw This behavior works in Webpack using DefinePlugin:

// webpack.config.js
const webpack = require('webpack');

/** @type {import('webpack').Configuration} */
const config = {
  mode: 'production',
  entry: './index.js',
  output: {
    filename: './out.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'a.b': '"x"'
    })
  ]
}

module.exports = config;

// index.js
console.log(a.b);
console.log(a?.b);

// out.js
console.log("x"),console.log("x");