Learn about common introduction methods

    import React from 'react';
    import { Page1 } from 'component/page1';
    import { Page2 } from './page2';
Copy the code

The node analytical

Normally, the import in Node.js is done by calling the require function. Node.js behaves differently depending on whether it requires a relative or non-relative path.

Relative path ‘./dist’ relative to the current file Absolute path ‘/dist’ relative to the root directory

Relative paths

Relative paths are easy. For example, suppose there is a file path /root/src/modulea.js that contains an import var x = require(“./moduleB”); Node.js parses the import in the following order:

  1. check/root/src/moduleB.jsWhether the file exists.
  2. check/root/src/moduleBWhether the directory contains apackage.jsonFile, andpackage.jsonThe file specifies one"main"The module. In our example, if node.js finds a file/root/src/moduleB/package.jsonContains the{ "main": "lib/mainModule.js" }Then Node.js will reference/root/src/moduleB/lib/mainModule.js.
  3. check/root/src/moduleBWhether the directory contains aindex.jsFile. This file is implicitly treated as the “main” module in that folder.

Nonrelative path

Resolution of nonrelative module names is a completely different process. Node will look for your modules in a special folder called node_modules. Node_modules may be in the same level as the current file, or in an upper level directory. Node iterates through its parent directory, looking for each node_modules until it finds a module to load.

Var x = require(“moduleB”); var x = require(“moduleB”); . Node resolves moduleB in the following order until there is a match.

  1. /root/src/node_modules/moduleB.js
  2. /root/src/node_modules/moduleB/package.json(If specified"main"Attributes)
  3. /root/src/node_modules/moduleB/index.js
  4. /root/node_modules/moduleB.js
  5. /root/node_modules/moduleB/package.json(If specified"main"Attributes)
  6. /root/node_modules/moduleB/index.js
  7. /node_modules/moduleB.js
  8. /node_modules/moduleB/package.json(If specified"main"Attributes)
  9. /node_modules/moduleB/index.js

Note that Node.js hops up one level in steps (4) and (7).

TypeScript parsing

TypeScript mimics the node.js runtime’s parsing strategy to locate module definition files during compilation. Therefore, TypeScript adds TypeScript source extensions (.ts,.tsx, and.d.ts) to Node parsing logic. Also, TypeScript uses the field “types” in package.json to mean something like “main” – the compiler uses it to find the “main” definition file to use.

For example, an import statement import {b} from “./moduleB” in /root/src/modulea.ts would locate “./moduleB” by the following process:

  1. /root/src/moduleB.ts
  2. /root/src/moduleB.tsx
  3. /root/src/moduleB.d.ts
  4. /root/src/moduleB/package.json(If specified"types"Attributes)
  5. /root/src/moduleB/index.ts
  6. /root/src/moduleB/index.tsx
  7. /root/src/moduleB/index.d.ts

Recall that node.js first looks for the moduleB.js file, then the appropriate package.json, then index.js.

Similarly, non-relative imports follow the node.js parsing logic, first looking for the file, then the appropriate folder. Therefore, import {b} from “moduleB” in /root/src/modulea. ts will be resolved in the following order:

  1. /root/src/node_modules/moduleB.ts
  2. /root/src/node_modules/moduleB.tsx
  3. /root/src/node_modules/moduleB.d.ts
  4. /root/src/node_modules/moduleB/package.json(If specified"types"Attributes)
  5. /root/src/node_modules/moduleB/index.ts
  6. /root/src/node_modules/moduleB/index.tsx
  7. /root/src/node_modules/moduleB/index.d.ts
  8. /root/node_modules/moduleB.ts
  9. /root/node_modules/moduleB.tsx
  10. /root/node_modules/moduleB.d.ts
  11. /root/node_modules/moduleB/package.json(If specified"types"Attributes)
  12. /root/node_modules/moduleB/index.ts
  13. /root/node_modules/moduleB/index.tsx
  14. /root/node_modules/moduleB/index.d.ts
  15. /node_modules/moduleB.ts
  16. /node_modules/moduleB.tsx
  17. /node_modules/moduleB.d.ts
  18. /node_modules/moduleB/package.json(If specified"types"Attributes)
  19. /node_modules/moduleB/index.ts
  20. /node_modules/moduleB/index.tsx
  21. /node_modules/moduleB/index.d.ts