Angular2.x/Typescript模块引入解析
admin
2023-02-12 21:00:09
0

首先,模块引入的时候有两种方式:
1、相对导入:

import Entry from "./components/Entry";
import { DefaultHeaders } from "../constants/http";
import "/mod";

相对导入在解析时是相对于导入它的文件,并且不能解析为一个外部模块声明,你应该为你自己写的模块使用相对导入,这样能确保它们在运行时的相对位置。

2、非相对导入:

import * as $ from "jQuery";
import { Component } from "@angular/core";

非相对模块的导入可以相对于baseUrl(在tsconfig.json中配置,详见https://www.tslang.cn/docs/handbook/module-resolution.html )或通过下文会讲到的路径映射来进行解析。 它们还可以被解析成 外部模块声, 使用非相对路径来导入你的外部依赖或者你项目的公共库(Angular8 后创建项目默认就是一个多个项目合集的workspace,项目间能更友好的访问)。

当我们import后,Angualr2.x/Typescript是怎么来解析找到我们的模块的呢?

比如有一个相对导入,有一个导入语句import { b } from "./moduleB"在/root/src/moduleA.ts里,会以下面的流程来定位"./moduleB":

/root/src/moduleB.ts
/root/src/moduleB.tsx
/root/src/moduleB.d.ts
/root/src/moduleB/package.json (如果指定了"types"属性)
/root/src/moduleB/index.ts
/root/src/moduleB/index.tsx
/root/src/moduleB/index.d.ts

我们可以看到,首先会在同级别目录下找moduleB-》moduleB的声明文件(.d.ts),假设都没有找到那么就会找同级别目录下的moduleB目录,其下的packages.json-》index -》index声明文件, 当然这些文件中要有关于b模块的export语句

另外一个非相对导入,import { b } from "moduleB"在/root/src/moduleA.ts里,会以下面的流程来定位"./moduleB":

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts

/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts

/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (如果指定了"types"属性)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts

这里请注意会逐级网上找,并且都是在node_modules里面,这个目录是node npm的包管理目录。

下面我来看一个具体的例子来实现不同方式的公共库导入:
我们有一个Hello项目,下面有一个src,下面有一个services,然后下面有一个Hello.ts;
然后有一个公共的库Common和Hello目录同级,下面有一个services,然后下面有一个Common.ts(Common中export了Common和Common1两个模块)
我们在Hello.ts需要导入Common库有以下几种方式

最原始的方式:
import { Common, Common1 } from '../../../Common/services/Common';
如果在Common下定义了一个index.ts里面有 export * from './services/Common'; 则可以用下面语句
import { Common, Common1 } from '../../../Common';

但是这种相对导入的库文件的方式有一个问题,如果这个Common文件夹位置移动,那么import过它的都需要进行相应更改,因为相对引用是根据当前引用文件的位置来的,这样我们来考虑非相对引入,如下:
import {Common, Common1} from 'common/services/Common';
import {Common, Common1} from 'common';
采用这种方式需要在tsconfig.ts中配置paths目录,让程序知道common到哪里去寻找

compilerOptions: {
        ...
    "baseUrl": "./", //配置baseUrl为tsconfig.ts的位置
        "paths": {     
      "common": [
        "../common"
      ],
      "common/*": [
        "../common/*" // 此处映射是相对于"baseUrl"
      ]
    }
}

相关内容

热门资讯

菲尔兹奖得主邓煜写过这些诗词 邓煜 李少君 徐俪成 | 澎湃新闻记者 徐萧 整理北京时间7月23日晚,中国数学家王虹、邓煜获颁菲尔...
中国海警局新闻发言人就菲位南海... 中国海警局新闻发言人姜略表示,7月24日,菲律宾组织7艘公务船、3艘海警舰、1艘运鱼船,并唆使大量渔...
外交部回应美国对数十国加征关税 7月24日,外交部发言人林剑主持例行记者会。有记者问:美国新一轮关税措施将于今天生效,外交部能否就此...
台湾岛以东相关海域治理进入经济... 为全面了解我国管辖海域渔业资源状况,7月17日至23日,农业农村部中国水产科学研究院东海水产研究所,...
日本正式决定设立国家情报局:系... 据凤凰卫视报道,日本政府7月24日正式决定设立国家情报局,计划于31日召开首次国家情报会议。这是日本...
伍斌任福建省副省长 据“新福建”客户端消息,7月24日,福建省十四届人大常委会第二十三次会议闭幕。会议表决通过了有关人事...
滚筒洗衣机脱水转不起来 滚筒洗衣机脱水转不起来:1、洗衣机顶盖的安全开关损坏。洗衣机在脱水的过程属于高速运作的机械运动。在脱...
洗衣机甩干桶嗡嗡响转不起来 洗衣机甩干桶嗡嗡响转不起来1、可能是洗衣机甩干桶下面的相关轴承长时间使用,缺乏润滑油导致的。2、可能...
不平衡滚筒洗衣机脱水转不起来 不平衡滚筒洗衣机脱水转不起来洗衣机不脱水时,首先检查洗衣机内是否有水。如果有水,首先打开排水阀检查里...
洗衣机脱水桶转不起来 1、有可能是因为洗衣机的内筒当中所放置的衣物过多了导致的。2、还有可能是因为电压不正常导致的。3、也...