Search code examples
javascriptnode.jslodashramda.js

Import { map } from 'lodash', 'rxjs', 'ramda' at the same time without hurting readability

How does one import map or merge or any other function from multiple imports?

import { map } from 'lodash';
import { map } from 'rxjs/operators';
import { map } from 'ramda';

The obvious answer is to:

import { map as _map } from 'lodash';
import { map as rxMap } from 'rxjs/operators';
import { map as RMap } from 'ramda';

But this is ugly and obscures code. I consider this a hack, not a solution, but a workaround due to the limitations of static analysis

I can think of another way:

import * as _ from 'lodash';
import { map } from 'rxjs/operators';
import * as R from 'ramda';

However, the JS community frowns upon this due to tree-shaking reasons. However, I am in the belief that it is over-exaggerated, only saving 45kb.

Solution

  • Basically you can create your own util bundles. For example:

    // utils/lodash.js
export { map, get, set } from 'lodash';

// yourScript.js
import * as _ from 'utils/lodash';