For my project Iam trying to use an javascript picture viewer:
https://fengyuanchen.github.io/viewerjs/
In the github readme https://github.com/fengyuanchen/viewerjs/blob/main/README.md
it says the viewer module can be imported by the following syntax:
import Viewer from 'viewerjs';
From my little javascript knowledge, I always thought that the from refers to file, so syntax would be something like this path information and proper file ending:
import Viewer from './viewer.js';
I also took a look at the scource code and all submodules are referenced without file endings:
import DEFAULTS from './defaults';
import TEMPLATE from './template';
import render from './render';
import events from './events';
import handlers from './handlers';
import methods from './methods';
import others from './others';
Can somebody please explain why in the mentioned cases, something like this is okay?
import Viewer from 'viewerjs';
>Solution :
In JavaScript, particularly when using modern module systems like ES6 modules, the way you import modules or files can differ based on the context and the module resolution strategy used by your environment (like Node.js, Webpack, or other bundlers).
When you use an import statement like import Viewer from ‘viewerjs’;, it refers to importing a module from the node_modules directory, which is managed by npm or yarn. Here, ‘viewerjs’ refers to the name of the package as listed in its package.json. The actual file that gets imported is determined by the "main" field in the package’s package.json file, or by the module resolution algorithm of your environment.
On the other hand, when you import using a path like import Viewer from ‘./viewer.js’;, you are importing a specific file relative to the location of the file that contains the import statement. This is used for importing local files in your project.
In both cases, file extensions can often be omitted. JavaScript environments like Node.js and bundlers like Webpack are configured to automatically resolve file extensions, typically .js, .json, etc.
So, when you see imports without file endings, like in the Viewer.js source code, it’s because the environment is set up to handle these imports correctly, resolving them to the appropriate files.