Javascript: Prefer namespace imports

[mohsen1]

Prefer namespace imports when importing more than n exports from a module.

// bad
import {map, reduce, filter} from 'lodash';

// good 
import * as _ from 'lodash';

Why?

Mainly git diff results. With namespace imports we don't have to touch the importing line.

It's also making the namespace variable more discoverable using the code-completion tools. Hitting _. will prompt all exports of lodash in editors that support interlisense

[ljharb]

Very strongly disagree. import * is only good for two reasons:

1. laziness
2. metaprogramming/reflection on the ModuleRecord.

"IDE autocomplete" is not a good enough reason to be lazy. import * should be avoided whenever possible - it also makes treeshaking/dead code removal not work as well.

Import what you need, explicitly.

[ljharb]

If you need to minimize git diffs, indent the imports on multiple lines:

import {
  map,
  reduce,
  filter,
} from 'lodash';

[mohsen1]

it also makes treeshaking/dead code removal not work as well

That's not true. Webpack and Rollup both can tree shake namespace imports and in case non-esModule modules destructuring won't help the tree-shaking either.

The diff with import destructuring is not minimal. Users have to add a new line regardless.

Laziness is very subjective also.

[ljharb]

In the case of Rollup, it tries to detect which imports you're using, but if it determines you're reflecting on it, it will just give you an incorrect ModuleRecord, breaking your code.

Importing more than you need, simply to avoid typing out the list of things you need, is a pretty objective metric for laziness imo.

[sgronblo]

If we are just counting chars, the destructured version could be seen as "lazier" since you get to type member instead of an explicit module.member.

Personally I am against abuse of destructuring since it tends to create a lot of names in the module's namespace. For many cases, I like the "namespacing" you get from importing a specific module and referring to members explicitly from the module.

[ljharb]

(Named import syntax is decidedly not destructuring, and babel's transpilation of this when importing CJS modules is invalid per spec and will break in the future)

If explicit imports mean you have "too many names", then I'd suggest splitting up your modules to fix the source of the problem, rather than abusing ModuleRecord imports to work around it.

[jasonkuhrt]

I think namesapces can play a helpful role in making code more readable. Its surprisingly relatively difficult to get a straight story on the subject of tree-shaking behaviour in various scenario across bundlers. fwiw I put up some of my own demos here https://github.com/jasonkuhrt/tree-shaking-demos to tree-shake (ahem) some of my FUD. Its a start, not exhaustive.