Angular2.x/Typescript模塊引入解析-創(chuàng)新互聯(lián)

首先，模塊引入的時(shí)候有兩種方式：
1、相對導(dǎo)入：

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),景德鎮(zhèn)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:景德鎮(zhèn)等地區(qū)。景德鎮(zhèn)做網(wǎng)站價(jià)格咨詢:18980820575

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

相對導(dǎo)入在解析時(shí)是相對于導(dǎo)入它的文件，并且不能解析為一個(gè)外部模塊聲明，你應(yīng)該為你自己寫的模塊使用相對導(dǎo)入，這樣能確保它們在運(yùn)行時(shí)的相對位置。

2、非相對導(dǎo)入：

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

非相對模塊的導(dǎo)入可以相對于baseUrl（在tsconfig.json中配置，詳見https://www.tslang.cn/docs/handbook/module-resolution.html ）或通過下文會(huì)講到的路徑映射來進(jìn)行解析。它們還可以被解析成外部模塊聲，使用非相對路徑來導(dǎo)入你的外部依賴或者你項(xiàng)目的公共庫（Angular8 后創(chuàng)建項(xiàng)目默認(rèn)就是一個(gè)多個(gè)項(xiàng)目合集的workspace，項(xiàng)目間能更友好的訪問）。

當(dāng)我們import后，Angualr2.x/Typescript是怎么來解析找到我們的模塊的呢？

比如有一個(gè)相對導(dǎo)入，有一個(gè)導(dǎo)入語句import { b } from "./moduleB"在/root/src/moduleA.ts里，會(huì)以下面的流程來定位"./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

我們可以看到，首先會(huì)在同級別目錄下找moduleB-》moduleB的聲明文件(.d.ts)，假設(shè)都沒有找到那么就會(huì)找同級別目錄下的moduleB目錄，其下的packages.json-》index -》index聲明文件，當(dāng)然這些文件中要有關(guān)于b模塊的export語句

另外一個(gè)非相對導(dǎo)入，import { b } from "moduleB"在/root/src/moduleA.ts里，會(huì)以下面的流程來定位"./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

這里請注意會(huì)逐級網(wǎng)上找，并且都是在node_modules里面，這個(gè)目錄是node npm的包管理目錄。

下面我來看一個(gè)具體的例子來實(shí)現(xiàn)不同方式的公共庫導(dǎo)入：
我們有一個(gè)Hello項(xiàng)目，下面有一個(gè)src，下面有一個(gè)services，然后下面有一個(gè)Hello.ts；
然后有一個(gè)公共的庫Common和Hello目錄同級，下面有一個(gè)services，然后下面有一個(gè)Common.ts（Common中export了Common和Common1兩個(gè)模塊）
我們在Hello.ts需要導(dǎo)入Common庫有以下幾種方式

最原始的方式：
import { Common, Common1 } from '../../../Common/services/Common';
如果在Common下定義了一個(gè)index.ts里面有 export * from './services/Common'; 則可以用下面語句
import { Common, Common1 } from '../../../Common';

但是這種相對導(dǎo)入的庫文件的方式有一個(gè)問題，如果這個(gè)Common文件夾位置移動(dòng)，那么import過它的都需要進(jìn)行相應(yīng)更改，因?yàn)橄鄬σ檬歉鶕?jù)當(dāng)前引用文件的位置來的，這樣我們來考慮非相對引入，如下：
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"
      ]
    }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：Angular2.x/Typescript模塊引入解析-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/dhphes.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Angular2.x/Typescript模塊引入解析-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管