This is the 20th day of my participation in the August Text Challenge.More challenges in August

Module resolution strategy

What is module resolution

Module resolution refers to the process followed by the compiler to find the contents of an imported module.

Relative and non-relative module imports

Module imports are resolved differently depending on whether module references are relative or non-relative.

Relative to the import

Relative imports start with /,./ or.. / a reference at the beginning

// Import the m1 module file in the root directory
import m1 from '/m1'
// Import the m2 module file in the mods directory of the current directory
import m2 from './mods/m2'
// Import the M3 module file in the upper-level directory
import m3 from '.. /m3'
Copy the code

Nonrelative import

All other forms of imports are treated as non-relative

import m1 from 'm1'
Copy the code

Module resolution strategy

To be compatible with different module systems (CommonJS, ESM), TypeScript supports two different module resolution strategies: Node and Classic, when the –module option is: For AMD, System, and ES2015, the default is Classic. For other cases, the default is Node

– moduleResolution options

In addition to automatically selecting the default module system type based on the –module option, we can manually specify the resolution policy through the –moduleResolution option

// tsconfig.json{... ."moduleResolution": "node"
}
Copy the code

The Classic module parses the policy

This policy, which was TypeScript’s default parsing policy, has been replaced by the new Node policy, which is now used primarily for backward compatibility

Relative to the import

// /src/m1/a.ts
import b from './b.ts'
Copy the code

Parse the lookup process:

  1. src/m1/b.ts

Default suffix completion

// /src/m1/a.ts
import b from './b'
Copy the code

Parse the lookup process:

  1. /src/m1/b.ts

  2. /src/m1/b.d.ts

Nonrelative import

// /src/m1/a.ts
import b from 'b'
Copy the code

For the import of non-relative modules, the system starts from the directory containing the import file to the upper-level directory until it reaches the root directory

  1. /src/m1/b.ts

  2. /src/m1/b.d.ts

  3. /src/b.ts

  4. /src/b.d.ts

  5. /b.ts

  6. /b.d.ts

The Node module parses the policy

This resolution strategy is based on node.js module resolution mechanism

Relative to the import

// node.js
// /src/m1/a.js
import b from './b'
Copy the code

In Classic, the module only looks for a single file, but in Node.js, it looks for a single file first, and if none exists, it looks for a directory

  1. /src/m1/b.js
  2. / SRC /m1/b/package.json file specified in’ main’
  3. /src/m1/b/index.js

Nonrelative import

// node.js
// /src/m1/a.js
import b from 'b'
Copy the code

For non-relativistically imported modules, parsing is special. Node.js will look in node_modules, a special folder, and will work its way up from node_modules in the current directory

  1. /src/m1/node_modules/b.js
  2. / SRC /m1/node_modules/b/package.json specifies the file in’ main’
  3. /src/m1/node_modules/b/index.js
  4. /src/node_modules/b.js
  5. / SRC /node_modules/b/package.json specifies the file in’ main’
  6. /src/node_modules/b/index.js
  7. /node_modules/b.js
  8. /node_modules/b/package.json specifies the file in’ main’
  9. /node_modules/b/index.js

TypeScript modules parse policies

TypeScript now uses a module resolution strategy similar to Node.js, but TypeScript adds lookup for several other source file extensions (.ts,.tsx,.d.ts). Also TypeScript uses the field types in package.json to indicate the meaning of main

The namespace

In TS, export and import are called external modules, and TS also supports an internal module namespace, which simply isolates the scope within the file (module contents)

namespace k1 {
    let a = 10;
    export var obj = {
        a
    }
}

namespace k2 {
    let a = 20;
    console.log(k1.obj);
}
Copy the code