current position:Home>Typescript - module resolution policy and namespace

Typescript - module resolution policy and namespace

2021-08-27 00:15:41 PiZriY

This is my participation 8 The fourth of the yuegengwen challenge 20 God , Check out the activity details :8 Yuegengwen challenge

Module parsing strategy

What is module parsing

Module parsing refers to the process followed by the compiler when looking for the contents of the imported module .

Relative and non relative module import

Depending on whether the module references are relative or non relative , Module imports resolve in different ways .

Relative Import

Relative import is based on /./ or ../ The opening quote

//  Import... Under the root directory  m1  Module file 
import m1 from '/m1'
//  Import... From the current directory  mods  In the catalog  m2  Module file 
import m2 from './mods/m2'
//  Import... Under the parent directory  m3  Module file 
import m3 from '../m3'
 Copy code 

Non relative Import

All other forms of import are treated as non relative

import m1 from 'm1'
 Copy code 

Module parsing strategy

In order to be compatible with different module systems (CommonJSESM),TypeScript Two different module parsing strategies are supported :NodeClassic, When --module The options are :AMDSystemES2015 When , The default is Classic , In other cases Node

--moduleResolution Options

Except according to --module Option automatically selects the default module system type , We can also go through --moduleResolution Option to manually specify the resolution policy

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

Classic Module parsing strategy

The strategy is TypeScript The previous default parsing policy , It has been new Node Replaced by policy , Now this strategy is mainly used for backward compatibility

Relative Import

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

Parse the lookup process :

  1. src/m1/b.ts

Default suffix completion

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

Parse the lookup process :

  1. /src/m1/b.ts

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

Non relative Import

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

For the import of non relative modules , It will start from the directory containing the imported file and traverse to the parent directory in turn , Up to 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

Node Module parsing strategy

The parsing strategy refers to Node.js Module parsing mechanism

Relative Import

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

stay Classic in , The module will only search according to a single file , But in Node.js in , It will first look for individual files , If it doesn't exist , Then it will search according to the directory

  1. /src/m1/b.js
  2. /src/m1/b/package.json in 'main' The documents specified in
  3. /src/m1/b/index.js

Non relative Import

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

For non relative Import modules , Parsing is very special ,Node.js This is a special folder node_modules Search in , And in the search process, from the... Of the current directory node_modules Search the parent folder level by level under the directory

  1. /src/m1/node_modules/b.js
  2. /src/m1/node_modules/b/package.json in 'main' The documents specified in
  3. /src/m1/node_modules/b/index.js
  4. /src/node_modules/b.js
  5. /src/node_modules/b/package.json in 'main' The documents specified in
  6. /src/node_modules/b/index.js
  7. /node_modules/b.js
  8. /node_modules/b/package.json in 'main' The documents specified in
  9. /node_modules/b/index.js

TypeScript Module parsing strategy

TypeScript Now it is used with Node.js A similar module parsing strategy , however TypeScript Added the search of several other source file extensions (.ts.tsx.d.ts), meanwhile TypeScript stay package.json Use fields in types To express main The meaning of

Namespace

stay TS in ,export and import be called External modules ,TS An internal module is also supported in namespace, Its main function is simply inside the file ( Module content ) Isolation scope

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

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

copyright notice
author[PiZriY],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827001538471h.html

Random recommended