宜宾网站建设公司

Angular2.x/Typescript模块引入解析-创新互联

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

创新互联公司是一家专注于成都网站制作、成都做网站与策划设计,景德镇网站建设哪家好?创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:景德镇等地区。景德镇做网站价格咨询:18980820575
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"
      ]
    }
}

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站名称：Angular2.x/Typescript模块引入解析-创新互联
URL网址：http://ybzwz.com/article/dhphes.html

其他资讯