Overriding Environment Settings?

[arist0tl3]

Hey all,

just grabbed this package and it looks great! I am curious if there is an easy way to override things tied to the environment settings?

My use case is that we are in the Meteor environment, but use an updated version of underscore as an npm package. But underscore is defined at the environment level as a global, so it seems like import-js has no way of detecting it.

Seems like the straightforward thing to do would be to do a local fork and just mod it to work. But I'm wondering if there is something in the importjs.js file that would allow the same?

Thanks in advance!

[dcporter]

If I'm understanding your need correctly, can you add _ to the globals list?

[arist0tl3]

@dcporter I thought the same, but tried a few different configs of the globals prop and all of them broke the normal functionality. Maybe I'm not understanding out to set the globals? My config file is super simple besides the globals stuff:

module.exports = {
  environments: ['meteor'],
  useRelativePaths: false,
  globals: {
    _: true, // also tried false here
  },
};

[trotzig]

Let's see if I understand things right. In meteor, _ is configured as a global (yep, looks like it: https://github.com/sindresorhus/globals/blob/610b54d1c294078b0e7338d8f37df9c63cdd5fb5/globals.json#L1120). You want to make it non-global so that when you run import-js it would add import _ from 'something'.

It looks like the globals config is an all-or-nothing thing right now (it's supposed to be an array, which is why I think your attempt fails), but I think you can do something like this to get the right behavior:

const globals = require('globals');

module.exports = {
  /// ...
  globals: Object.keys(globals.meteor).filter((name) => name !== '_');
};

(note: this is completely untested...)

[arist0tl3]

@trotzig Thanks for the suggestion. By logging Object.keys(globals.meteor).filter((name) => name !== '_'), I can see that the array I want is getting set properly -- it includes all the globals.meteor keys, minus _.

Also, I can see that the meteor environment is working, as it pulls FlowRouter (which doesn't get pulled when the environment isn't set).

However, import-js is still not picking up on the _. usage. If I try the import under word function, I see:

[trotzig]

You might have to add _ as an alias as well. There's nothing in underscore by default that maps it to _. Same for e.g. $ => jquery.

[arist0tl3]

These were the only configs where I could successfully get underscore to auto-import:

module.exports = {
  declarationKeyword: 'import',
  aliases: {
    '_': 'underscore',
  },
};

module.exports = {
  environments: ['node'],
  declarationKeyword: 'import',
  aliases: {
    '_': 'underscore',
  },
};

Once I added the meteor environment, auto-import of underscore failed, and manually importing underscore (using Import Word Under Cursor) resulted in the leading / -- #381 (just noting this for reference).

Did a little digging and found this: https://github.com/Galooshi/import-js/blob/63aca8d512e9e7e7b9b5a1e1c82d177a66ff21be/lib/Configuration.js#L73-L82, which seems to imply that passing in the globals prop with the stripped keys isn't going to work as these globals are just merged with the environment globals?

Edit: Yeah, the merge happens here: https://github.com/Galooshi/import-js/blob/63aca8d512e9e7e7b9b5a1e1c82d177a66ff21be/lib/Configuration.js#L141-L163

[trotzig]

Thanks for your perseverance @arist0tl3. I had forgot about the merging, you came to the right conclusion. I'm starting to think that it might be simpler for you to use a different name for the custom underscore that you use. Even just using underscore would probably work, as long as it's listed as a dependency. Another option would be to import specific functions directly, e.g.

import { throttle } from 'underscore';

or

const { throttle } = require('underscore');

if you're using es5.

[coagmano]

I've added a PR (incomplete) that would allow a user configuration to disable merging for particular keys, allowing globals to be overwritten properly. Looking for feedback before I finish polishing it

[coagmano]

Hey folks, as of version 2.9.0 you can now override whatever you want with the mergableOptions config option.

Here's what I'm using in my Meteor config:

const globals = require('globals');

module.exports = {
    declarationKeyword: 'import',
    environments: ['meteor', 'node'],
    mergeableOptions: {
        globals: false
    },
    globals: [ 
      ...Object.keys(globals.builtin),
      ...Object.keys(globals.node),
      'Package',
      'Npm',
      '$'
    ],
    useRelativePaths: false,
};