Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialPhilip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 PointsHow does the import statement know where to import from??
Given this line: import React, { Component } from 'react'; - how does the import statement know where to find React and Component when we are supplying the string 'react' instead of a pathname to a file???
1 Answer
Ari Misha
19,323 PointsImport is just a syntactic sugar of require() method of CommonJS pattern, which we still follow with Node/ExpressJS. But your question made me really think so I dug into Nodejs core, and here is what i found out:
-
There is a file called Module.js and it looks something like this:
``` function Module (parent, id) { this.id = id; this.exports = {}; this.parent = parent; ...... } ```
-
Module.js provides two powerful mechanisms:
- Each file is given the instance of this Module constructor. on load, that's why you're able to attach properties even after it has been loaded or exported to another file.
-
require
function is just an abstraction aroundmodule.require
which internally calls `module._load
Module._load
handles file loading and module caching, which in turn removes any redundant imports and enhances the development time. As soon as this process is done, everything is shipped toModule._compile
where real magic happensIn
Module._compile
, a real standalonerequire()
function gets created for the same module. We all have used THIS function, right? Turned out THIS is just a wrapper around the require() function for the same file/module. Amazing isn't it? Also,Module._compile
has other helper functions just to check the valid extension types, and resolving a path name to absolute name, and the absolute path to main module and access to all cached modules.
So yeah whenever you open your editor and import any module, the above steps are happening behind the scenes. Also, your editor shows the intellisense on auto imports, right? Editors indexes all the modules and cache them by the variables or classes or Interfaces or module names, that's how you get the imports and auto imports.
~ Ari