Support destructuring

[vankop]

Feature request

support destructuring in:

• EnvironmentPlugin, DefinePlugin, ImportMetaPlugin (partial support?), other plugins?
• Treeshake dynamic imports based on destructuring #16872
• support destructuring assignment in parser #16941 treeshaking when using namespace object, e.g. import * as b from 'b';const {a} = b;
• json treeshaking, e.g. import b from '1.json'; const {a} = b;

What is the expected behavior?

Webpack should support destructuring on parser level

What is motivation or use case for adding/changing the behavior?

Modern versions of runtime environments (browsers, Node.js, Deno) support destructuring

How should this be implemented in your opinion?

JavascriptParser should be improved

Are you willing to work on this yourself?
yes

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[fregante]

6 other issues were redirected to this one, let's not make it die

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[TheLarkInn]

EnvironmentPlugin, DefinePlugin, ImportMetaPlugin (partial support?), other plugins?

@vankop this piece is already supported now correct?

[vankop]

@TheLarkInn webpack doesnt support destructing.. so what actually happens right now:

const { a } = process.env;

webpack renders to:

const { a } = {...all envs here...};

issue is about providing only required properties:

const { a } = { a: 1 };

main reason why it didn't solved yet, as we discussed with @sokra we need to support <es2015 ( mainly babel version ) as well to make build result independent to target. otherwise we could have:

const { a } = { a: 1 };

for >=es2015 and

var _b = {...all envs...},
  a = _b.a;

for es<2015

but supporting babel version is tricky.. I would vote to drop this and support only destructing

[fregante]

Last time I tried, process.env; was not replaced at all because EnvironmentPlugin and DefinePlugin did a string search and replace for exactly "process.env.NAME". Has this changed since? What you're saying only worked if you used something along the lines of DefinePlugin({'process.env':{NAME: 'foo'}})

[vankop]

What you're saying only worked if you used something along the lines of DefinePlugin({'process.env':{NAME: 'foo'}})

that is a correct usage.. not sure what you mean..

---

if you define process.env.a and use const { a } = process.env; it will not work

[fregante]

that is a correct usage.. not sure what you mean..

"Correct" but far from ideal since EnvironmentPlugin exists for this reason but it exclusively supports process.env.a

[vankop]

yes, api is not optimal, but breaking change could lead to security leaks like:

webpack.config.js

const define = new DefinePlugin({'env': {..blabla}, 'env.SECRET': 1});
module.exports = [{
  name: 'my-awesome-backend',
  entry: 'backend.js',
  plugins: [define]
}, {
 name: 'my-awesome-frontend',
  entry: 'frontend.js',
  plugins: [define]
}];

backend.js

// I love to use secrets on backend since it is quite save
const { SECRET } = env;
// or case that works right now
env.SECRET;

frontend.js

// I dont like secrets in my frontend to be exposed
const { data } = env;

Thats why we cant fix api right now

[fregante]

For the record, I don't care about DefinePlugin specifically, I only mentioned it because "it's the only way to do it". EnviromentPlugin is the only plugin I would use to set ENVs.

The argument in #5392 is that I would expect:

new EnvironmentPlugin(['NAME'])

to support both const NAME = process.env.NAME and const {NAME} = process.env indiscriminately.

Lint rules like prefer-destructuring effectively push users into webpack’s own limitations and rightfully refuse to "fix" it: eslint/eslint#14918 (comment)

The only security argument I see is against allowing const {[dynamic] = myvar} = process.env, which doesn't apply to EnviromentPlugin anyway

---

I posted my own repos/tests in:

• https://github.com/fregante/webpack-sandbox/blob/main/environmentplugin-destructuring
• https://github.com/fregante/webpack-sandbox/tree/main/defineplugin-destructuring

[KaKi87]

issue is about providing only required properties:
const { a } = { a: 1 };

This doesn't account for the following though :

const {
  env: {
    a
  }
} = process;

[TheLarkInn]

Could we try and implement these scenarios behind experiments.supportModernDestructuring or something similar (we can bikeshed the experiment name if needed).