Understanding Module Specifier

In my previous post, to keep things simple all code files are living together in the same directory. When importing, specifying "./" and then the name of the file tells the compiler or bundler to look in the current directory to find the file. This simple setup works fine for a simple demonstrative example, but in a real project with even a little bit of complexity we need to organize our files better. The specifier part of an import statement is how you indicate where the file is located. As I already mentioned, using "./" indicates "look in the current directory". But the files you need in many cases are probably within a subdirectory. In the example below all of the math functionality has been cleaned up and moved into its own folder. Now, from the index.js file, to access the add.js file, you would need to use the module specifier "./calculator/add.js". This is saying "look in the current directory for a folder named 'calculator', then inside of it, grab the file named 'add.js'" A feature of the module specifiers spec is that if a file isn't explicitly declared in the import statement, the compiler will look for a file named "index.js". This can be used to organize functionality and to clean up the amount of import statements for the consuming code. As you can see below, all of the operation and constants are imported to an index file, where they can be imported with only one import statement. The calculator could be refactored and organized itself. With constants and operations moved to their own nested directory we would need to update our module specifier to take into account the new folder structure.

Mar 19, 2025 - 19:42

In my previous post, to keep things simple all code files are living together in the same directory. When importing, specifying "./" and then the name of the file tells the compiler or bundler to look in the current directory to find the file. This simple setup works fine for a simple demonstrative example, but in a real project with even a little bit of complexity we need to organize our files better.

The specifier part of an import statement is how you indicate where the file is located. As I already mentioned, using "./" indicates "look in the current directory". But the files you need in many cases are probably within a subdirectory. In the example below all of the math functionality has been cleaned up and moved into its own folder.

Now, from the index.js file, to access the add.js file, you would need to use the module specifier "./calculator/add.js". This is saying "look in the current directory for a folder named 'calculator', then inside of it, grab the file named 'add.js'"

A feature of the module specifiers spec is that if a file isn't explicitly declared in the import statement, the compiler will look for a file named "index.js". This can be used to organize functionality and to clean up the amount of import statements for the consuming code. As you can see below, all of the operation and constants are imported to an index file, where they can be imported with only one import statement.

The calculator could be refactored and organized itself. With constants and operations moved to their own nested directory we would need to update our module specifier to take into account the new folder structure.