�ݺ�ߣ

Module Resolution
JAGADEESH PATTA

Introduction
 Module Resolution is the process uses by compiler to figure out imports.
Eg:-
import { a } from “moduleA”
 The compiler check any usage of “a” in the entire application. If required
then the compiler will check the definition of “moduleA”.

Type of imports
 Relative imports.
 Non – Relative Imports.

Relative imports
 A relative import is one of the importing mechanism. That starts with /, ./,
../.
Eg:-
import { DefaultHeaders } from “../constants/http”;
Note:
 Relative imports depends on reference path.
 It is not supported for ambient modules.

Non-Relative imports
 A non-relative import is one of the importing mechanism.
Eg:-
import { Component } from “@angular/core”;
Note:
 Non-Relative imports depends on baseUrl.
 It is supported for ambient modules too.

Resolution strategies
 Classic.
 Node.

Resolution strategies - Classic
 This is the default resolution strategy in typescript.
Classic – Relative:
import { b } from “./moduleB”
Lookups:
/ root / src / folder / moduleB.ts
/ root / src / folder / moduleB.d.ts
/ root / src / folder / moduleB.tsx

Resolution strategies - Classic
Classic – Non-Relative:
import { b } from “moduleB”
Lookups:
/ root / src / folder / moduleB.ts
/ root / src / folder / moduleB.d.ts
/ root / src / moduleB.ts
/ root / src / moduleB.d.ts
/ root / moduleB.ts
/ root / moduleB.d.ts
/ moduleB.ts
/ moduleB.d.ts

Resolution strategies - Node
 This is resolution strategy attempts Node.js module resolution mechanism
at runtime.
 Imports in node.js are performed by calling a function require.
 The require behavior is differ from relative and no-relative imports in
different manner.

Node – Relative:
import statement:
var x = require(“./moduleB”);
file location:
/ root / src / moduleA.js

Node – Relative > resolution steps:
 As a file
/ root / src / moduleB.js
 As a folder
/ root / src / moduleB if it contains package.json and that specifies as main module.
Than node.js refers
/ root / src / moduleB / lib / mainModule.js.
 As a folder
/ root / src / moduleB if it contains a file index.js. That file is implicitly considered that
folders main module.

Node – Non-Relative:
 Node.js will look for your module in special folder node_modules.
 A node_modules folder must be in the same level of hierarchy or higher up the director
chain.
 Node will lookup directory chain, looking through each node_module until the module
tried to load.

import statement:
var x = require ( “moduleB” );
lookups:
/ root / src / node_modules / moduleB.js
/ root / src / node_modules / moduleB / package.json
/ root / src / node_modules / moduleB / index.js

lookups ( cont … ):
/ root / node_modules / moduleB.js
/ root / node_modules / moduleB / package.json
/ root / node_modules / moduleB / index.js
/ node_modules / moduleB.js
/ node_modules / moduleB / package.json
/ node_modules / moduleB / index.js

How Typescript resolve modules
 Typescript will use the node.js run-time resolution strategy for locate
definition files at compile time.
 To accomplish this, Typescript overlays Typescript source file
extensions(.ts, .tsx and .d.ts).
 Typescript will also use a field in package.json named typings.
 Using typings the compiler will find main definition file.

Typescript Resolution strategies
Relative:
import statement:
import { b } from “./moduleB”;
lookups:
/ root / src / moduleB.js
/ root / src / moduleB.tsx
/ root / src / moduleB.d.ts

Relative:
/ root / src / moduleB / package.json ( if moduleB specifies in “typings” property )
/ root / src / moduleB / index.ts
/ root / src / moduleB / index.tsx
/ root / src / moduleB / index.d.ts

Non - Relative:
import statement:
import { b } from “moduleB”;
lookups:
/ root / src / node_modules / moduleB.js
/ root / src / node_modules / moduleB.tsx
/ root / src / node_modules / moduleB.d.ts

Non-Relative:
/ root / src / node_modules / moduleB / package.json
/ root / src / node_modules / moduleB / index.ts
/ root / src / node_modules / moduleB / index.tsx
/ root / src / node_modules / moduleB / index.d.ts

Non-Relative:
/ root / node_modules / moduleB.js
/ root / node_modules / moduleB.tsx
/ root / node_modules / moduleB.d.ts
/ root / node_modules / moduleB / package.json
/ root / node_modules / moduleB / index.ts
/ root / node_modules / moduleB / index.tsx
/ root / node_modules / moduleB / index.d.ts

Non-Relative:
/ node_modules / moduleB.js
/ node_modules / moduleB.tsx
/ node_modules / moduleB.d.ts
/ node_modules / moduleB / package.json
/ node_modules / moduleB / index.ts
/ node_modules / moduleB / index.tsx
/ node_modules / moduleB / index.d.ts

Resolution Flags
 Base Url
 Path Mapping
 Virtual Directories

Resolution Flags – Base Url
 Setting baseUrl informs the compiler where to find modules.
 All non – relative modules relative to baseUrl
Eg:-
{
“compilerOptions” : {
“baseUrl” : “.”
}
}

Resolution Flags – Path Mapping
 Some module are not located under baseUrl.
Eg:-
{
“baseUrl” : “.”,
“paths” : {
“jquery” : [ “node_modules / jquery / dist / jquery” ]
}
}
}

Resolution Flags – Virtual Directories
 Some module are not located under baseUrl.
Eg:-
{
“rootDirs” : [
“src / views”,
“generated / templates / views”
]
}
}

�ݺ�ߣ

Module resolution | Typescript

More Related Content

Module resolution | Typescript