Npm package global import

help
1

Hi,

I installed “alertify” npm package, the package is imported correctly but I’m importing it in each file where it’s needed.

now I want to import it only once and not inside each file.

I thought maybe importing it inside main.jsx would work but no luck.

I couldn’t find an answer elsewhere.

Thanks in advance.

2

Have you tried assigning it to a global variable in main.jsx?
It might not be such a good idea, though.

Something like:

import { alertify } from 'alertify';
a = alertify;

You should now be able to use a from anywhere.

3

Thanks for your reply,
it didn’t but after removing the curly brackets it did, thanks.

can I know why it’s a bad idea ?

and is it possible to keep the original name to keep the semantic.

I tried this but obviously it didn’t work:

import alertify from ‘alertify’;
alertify = alertify;

4

import alertify , here “alertify” is just an alias. You can choose whatever you want.

Brackets are required when you need to import something which has a specific name. (you can give an alias)

5

Because polluting the global namespace is considered a bad thing. You never know if your naming conventions don’t overwrite something else or vice versa.

That’s why basically anything with the capability of importing external modules has namespaces and local scopes - that way you can do anything you want in your file/module and don’t have to worry about breaking things in another file/module (besides the usual ‘Called a method in the wrong way’, of course).

And, yes, it’s slightly annoying to have to reimport stuff in every file. Then again, the alternative is potentially breaking things so there’s that.

In any way, this is a convention designed to “protect” you from yourself (or others). Not in the sense of security but in the sense of more sensible code.

It also makes it possible to easily see where code comes from. “Magic” variables/objects like the one you’d like to create makes it harder for you (or others) to see what’s going on if you revisit your code at a later date.

tl;dr: Don’t. It’s a bad habit and should only be considered if there’s absolutely no other way.

3 Likes
6

Not quite. You need to use brackets if something is exported which is not the default export.

Example:

///exporting module
const foo = "bar"
const baz = "frob"

export { baz } 
export default foo;

You can then do:

import Foo from 'module';
import { baz }  from 'module';

Basically, brackets for non-default exports. But both, the default and the non-default exports, can be aliased.

7

I realised that my answer was not very accurate, but yes like you say “brackets for non-default” :wink: .

8

Thank you for the clarification, it makes perfect sense even if it’s annoying :slight_smile: .

according to what you explained to me, a question came to my mind:

I’ve noticed that some packages (not sure if all or only some, since I’m still new to meteor) installed from Atmosphere can be used without importing (for instance Momentjs ). does it mean that this package is not using best practices and polluting the global namespace ?

9

Probably yes. But such packages as they are are probably stemming from legacy conventions before the proper implementation of require / import. You have to remember, Javascript didn’t start out the way the C derivatives did (to name one example).

All the Atmosphere packages I’m using work through import so it’s not as if the times are not changing :wink:

Regarding Momentjs - that’s particularly strange because it’s just a repackage of the npm-module which definitely does not work without imports…
In fact, I myself use Moment directly through npm - I try to avoid such repackages because they are dependant on the maintainer keeping up with updates which then sometimes break down.

2 Likes
10

I really appreciate all the clarifications, Thank you very much :slight_smile: .