工程引用是TypeScript 3.0引入的新功能。它允許一個(gè)TypeScript工程引用一個(gè)或多個(gè)其他的TypeScript工程。借助于工程引用，我們可以將一個(gè)原本較大的TypeScript工程拆分成多個(gè)TypeScript工程，并設(shè)置它們之間的依賴(lài)關(guān)系。每個(gè)TypeScript工程都可以進(jìn)行獨(dú)立的配置與類(lèi)型檢查。當(dāng)我們修改其中一個(gè)工程的代碼時(shí)，會(huì)按需對(duì)其他工程進(jìn)行類(lèi)型檢查，因此能夠顯著地提高類(lèi)型檢查的效率。同時(shí)，使用工程引用還能夠更好地組織代碼結(jié)構(gòu)，從邏輯上將軟件拆分為可以重用的組件，將實(shí)現(xiàn)細(xì)節(jié)封裝在組件內(nèi)部，并通過(guò)定義好的接口與外界交互。

1、使用工程引用

若一個(gè)目錄中包含“tsconfig.json”配置文件，那么該目錄將被視為T(mén)ypeScript工程的根目錄。在使用工程引用時(shí)，需要在“tsconfig.json”配置文件中進(jìn)行以下配置：

• 使用“references”屬性配置當(dāng)前工程所引用的其他工程。
• 被引用的工程必須啟用“composite”編譯選項(xiàng)。

1.1、references

“tsconfig.json”配置文件有一個(gè)頂層屬性“references”?。它的值是對(duì)象數(shù)組，用于設(shè)置引用的工程。示例如下：

{
    "references": [
        { "path": "../pkg1" },
        { "path": "../pkg2/tsconfig.release.json" },
    ]
}

其中，?“path”的值既可以是指向含有“tsconfig.json”配置文件的目錄，也可以直接指向某一個(gè)配置文件，此時(shí)配置文件名可以不為“tsconfig.json”?。此例中的工程引用了兩個(gè)工程。

1.2、–composite

“–composite”編譯選項(xiàng)的值是一個(gè)布爾值。通過(guò)啟用該選項(xiàng)，TypeScript編譯器能夠快速地定位依賴(lài)工程的輸出文件位置。如果一個(gè)工程被其他工程所引用，那么必須將該工程的“–composite”編譯選項(xiàng)設(shè)置為true。

當(dāng)啟用了該編譯選項(xiàng)時(shí)，它會(huì)影響以下的配置：

• 如果沒(méi)有設(shè)置“–rootDir”編譯選項(xiàng)，那么它將會(huì)被設(shè)置為包含“tsconfig.json”配置文件的目錄。
• 如果設(shè)置了“include”或“files”屬性，那么所有的源文件必須被包含在內(nèi)，否則將產(chǎn)生編譯錯(cuò)誤。
• 必須啟用“–declaration”編譯選項(xiàng)。

1.3、–declarationMap

“–declarationMap”是推薦啟用的編譯選項(xiàng)。如果啟用了該選項(xiàng)，那么在生成“.d.ts”聲明文件時(shí)會(huì)同時(shí)生成對(duì)應(yīng)的“Source Map”文件。這樣在代碼編輯器中使用“跳轉(zhuǎn)到定義”的功能時(shí)，編輯器會(huì)自動(dòng)跳轉(zhuǎn)到代碼實(shí)現(xiàn)的位置，而不是跳轉(zhuǎn)到聲明文件中類(lèi)型聲明的位置。示例如下：

{
    "compilerOptions": {
        "declaration": true,
        "declarationMap": true
    }
}

2、工程引用示例

該示例項(xiàng)目由“C:\app\src”和“C:\app\test”兩個(gè)工程組成，其目錄結(jié)構(gòu)如下：

C:\app
|-- src
|   |-- index.ts
|   `-- tsconfig.json
`-- test
    |-- index.spec.ts
    `-- tsconfig.json

“index.ts”文件的內(nèi)容如下：

export function add(x: number, y: number) {
    return x + y;
}

“index.spec.ts”文件的內(nèi)容如下：

import { add } from '../src/index';

if (add(1, 2) === 3) {
    console.log('pass');
} else {
    console.log('failed');
}

2.1、配置references

在該項(xiàng)目中，?“C:\app\test”工程依賴(lài)于“C:\app\src”工程中的模塊。因此，?“C:\app\test”工程依賴(lài)于“C:\app\src”工程。

在“C:\app\test”工程的“tsconfig.json”配置文件中設(shè)置對(duì)“C:\app\src”工程的依賴(lài)。?“C:\app\test\tsconfig.json”配置文件的內(nèi)容如下：

{
    "references": [
        {
            "path": "../src"
        }
    ]
}

此例中，通過(guò)“references”屬性設(shè)置了對(duì)“C:\app\src”工程的引用。

2.2、配置composite

在該項(xiàng)目中，?“C:\app\src”工程被“C:\app\test”工程所依賴(lài)。因此，必須在“C:\app\src”工程的tsconfig.json配置文件中將“–composite”編譯選項(xiàng)設(shè)置為true。

“C:\app\src\tsconfig.json”配置文件的內(nèi)容如下：

{
    "compilerOptions": {
        "composite": true,
        "declarationMap": true
    }
}

至此，所有必須的工程引用配置已經(jīng)設(shè)置完畢。

3、–build

TypeScript提供了一種新的構(gòu)建模式來(lái)配合工程引用的使用，它就是“–build”模式（簡(jiǎn)寫(xiě)為“-b”?）?。在該模式下，編譯器能夠進(jìn)行增量構(gòu)建。具體的使用方式如下所示：

tsc --build

當(dāng)使用該命令構(gòu)建TypeScript工程時(shí)，編譯器會(huì)執(zhí)行如下操作：

• 查找當(dāng)前工程所引用的工程。
• 檢查當(dāng)前工程和引用的工程是否有更新。
• 若工程有更新，則根據(jù)依賴(lài)順序重新構(gòu)建它們；若沒(méi)有更新，則不進(jìn)行重新構(gòu)建。

下面還是以上一節(jié)中的示例項(xiàng)目為例，目錄結(jié)構(gòu)如下：

C:\app
|-- src
|   |-- index.ts
|   `-- tsconfig.json
`-- test
    |-- index.spec.ts
    `-- tsconfig.json

在“C:\app”目錄下使用“–build”模式首次構(gòu)建“C:\app\test”工程。示例如下：

tsc --build test --verbose

tsc命令的運(yùn)行結(jié)果如下：

[6:00:00 PM] Projects in this build:
                 * src/tsconfig.json
                 * test/tsconfig.json
[6:00:00 PM] Project 'src/tsconfig.json' is out of date because
             output file 'src/index.js' does not exist
[6:00:00 PM] Building project 'src/tsconfig.json'...
[6:00:00 PM] Project 'test/tsconfig.json' is out of date because
             output file 'test/index.spec.js' does not exist
[6:00:00 PM] Building project 'test/tsconfig.json'...

通過(guò)以上運(yùn)行結(jié)果能夠看到，當(dāng)構(gòu)建“C:\app\test”工程時(shí)，編譯器先確定參與本次構(gòu)建的所有工程，然后根據(jù)引用順序?qū)Υ幾g的工程進(jìn)行排序。此例中的順序?yàn)橄染幾g“C:\app\src”工程，后編譯“C:\app\test”工程。接下來(lái)開(kāi)始嘗試編譯“C:\app\src”工程。由于之前沒(méi)有編譯過(guò)該工程，它不處于最新?tīng)顟B(tài)，因此編譯器會(huì)編譯“C:\app\src”工程。同理，在編譯完“C:\app\src”工程后會(huì)接著編譯“C:\app\test”工程。

假設(shè)自上一次編譯完“C:\app\test”工程之后，沒(méi)有對(duì)“C:\app\src”工程和“C:\app\test”工程做任何修改。當(dāng)再一次使用“–build”模式構(gòu)建“C:\app\test”工程時(shí)，運(yùn)行結(jié)果如下：

[6:00:01 PM] Projects in this build:
                 * src/tsconfig.json
                 * test/tsconfig.json
[6:00:01 PM] Project 'src/tsconfig.json' is up to date because
             newest input 'src/index.ts' is older than oldest
             output 'src/index.js'
[6:00:01 PM] Project 'test/tsconfig.json' is up to date because
             newest input 'test/index.spec.ts' is older than 
             oldest output 'test/index.spec.js'

通過(guò)以上運(yùn)行結(jié)果能夠看到，編譯器能夠檢測(cè)出“C:\app\src”工程和“C:\app\test”工程沒(méi)有發(fā)生變化，因此也就沒(méi)有重新編譯這兩個(gè)工程。

“C:\app\src”工程和“C:\app\test”工程編譯后的目錄結(jié)構(gòu)如下：

C:\app
|-- src
|   |-- index.d.ts
|   |-- index.js
|   |-- index.ts
|   |-- tsconfig.tsbuildinfo
|   `-- tsconfig.json
`-- test
    |-- index.spec.ts
    |-- index.spec.js
    `-- tsconfig.json

在“C:\app\src”工程和“C:\app\test”工程中都編譯生成了對(duì)應(yīng)的“.js”文件。

在“C:\app\src”工程中，由于啟用了“–composite”編譯選項(xiàng)，它會(huì)自動(dòng)啟用“–de-claration”編譯選項(xiàng)，因此編譯后生成了index.d.ts聲明文件。

在“C:\app\src”工程中還生成了“tsconfig.tsbuildinfo”文件，它保存了該工程本次構(gòu)建的詳細(xì)信息，編譯器正是通過(guò)查看該文件來(lái)判斷當(dāng)前工程是否需要重新編譯。

TypeScript還提供了以下一些僅適用于“–build”模式的編譯選項(xiàng)：

• –verbose，打印構(gòu)建的詳細(xì)日志信息，可以與以下編譯選項(xiàng)一起使用。
• –dry，打印將執(zhí)行的操作，而不進(jìn)行真正的構(gòu)建。
• –clean，刪除工程中編譯輸出的文件，可以與“–dry”一起使用。
• –force，強(qiáng)制重新編譯工程，而不管工程是否有更新。
• –watch，觀察模式，執(zhí)行編譯命令后不退出，等待工程有更新后自動(dòng)地再次編譯工程。

4、solution模式

當(dāng)一個(gè)項(xiàng)目由多個(gè)工程組成時(shí)，我們可以新創(chuàng)建一個(gè)“solution”工程來(lái)管理這些工程。?“solution”工程本身不包含任何實(shí)際代碼，它只是引用了項(xiàng)目中所有的工程并將它們關(guān)聯(lián)在一起。在構(gòu)建項(xiàng)目時(shí)，只需要構(gòu)建“solution”工程就能夠構(gòu)建整個(gè)項(xiàng)目。

接下來(lái)，我們將之前的“C:\app\src”工程和“C:\app\test”工程重構(gòu)為“solution”模式。修改后的目錄結(jié)構(gòu)如下：

C:\app
|-- src
|   |-- index.ts
|   `-- tsconfig.json
|-- test
|   |-- index.spec.ts
|   `-- tsconfig.json
`-- tsconfig.json

我們?cè)?ldquo;C:\app”目錄下新建了一個(gè)“tsconfig.json”配置文件，目的是讓“C:\app”成為一個(gè)“solution”工程。?“tsconfig.json”配置文件的內(nèi)容如下：

{
    "files": [],
    "include": [],
    "references": [
        { "path": "src" },
        { "path": "test" }
    ]
}

在該配置文件中同時(shí)將“C:\app\src”工程和“C:\app\test”工程設(shè)置為引用工程。此外，必須將“files”和“include”屬性設(shè)置為空數(shù)組，否則編譯器將會(huì)重復(fù)編譯“C:\app\src”工程和“C:\app\test”工程。

在“C:\app”目錄下使用“–build”模式來(lái)編譯該工程，如下所示：

tsc --build --verbose

tsc命令的運(yùn)行結(jié)果如下：

[6:00:10 PM] Projects in this build:
                 * src/tsconfig.json
                 * test/tsconfig.json
                 * tsconfig.json
[6:00:10 PM] Project 'src/tsconfig.json' is out of date because
             output file 'src/index.js' does not exist
[6:00:10 PM] Building project 'src/tsconfig.json'...
[6:00:10 PM] Project 'test/tsconfig.json' is out of date because
             output file 'test/index.spec.js' does not exist
[6:00:10 PM] Building project 'test/tsconfig.json'...

通過(guò)以上運(yùn)行結(jié)果能夠看到，編譯器能夠正確地編譯“C:\app\src”工程和“C:\app\test”工程。

到此這篇關(guān)于TypeScript中工程引用的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)TypeScript 工程引用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論