如何正確添加的.js庫，以我的應用程序，這樣我可以在打字稿模塊

Question

導入之前，我學會了如何打字稿模塊的工作一點點，如果我想用一個js庫如jQuery我只想補充一個script標籤引用該庫，但現在，我使用的打字稿，我經常發現這樣的例子：

import * as $ from 'jquery' 

但jQuery是不是打字稿模塊，它是如何工作的呢？我應該如何將外部非打字稿庫添加到我的模塊中？

編輯＃1

---

tsconfig.json

明確告訴打字稿使用AMD格式（我選擇了commonjs這一個，因爲我讀了自從AMD負載模塊異步，它是更適合於Web應用程序）

{ 
    "compilerOptions": { 
    "sourceMap": false, 
    "target": "es5", 
    "module": "amd", 
    "outDir": "Scripts" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

要安裝我用的類型定義分型

typings install dt~jquery --global --save 

提過什麼，我實際使用，我不明白的是RequireJs如何能夠找到第三方庫的時候，我只指定要加載的文件（在這種情況下， app.js）後require.js負載

<script data-main="Scripts/app/app" src="Scripts/require.js"></script> 

我嘗試過和require.js script標籤後加入爲jquery.js文件的腳本標籤，但沒有奏效。所以，我怎麼想告訴require.js「看起來我需要這個X文件中去，並加載它爲我」？

我問這是因爲，如果我理解正確的類型定義的目的，他們的存在只是爲了給我們類型檢查，僅此而已，我們還需要添加我們要用實際的庫。

---

編輯＃2

那麼，到底這是我落得這樣做：

I）根據http://requirejs.org/docs/api.html#data-main此頁面，data-main僅供使用時的頁面只是有一個主入口點，當你需要其他的js文件，所以下面的配置應該使用它將會失敗：

<script src="~/Scripts/require.js"></script> 
<script> 
     require.config({ 
      paths: { 
       "lodash": "Scripts/lodash" 
      } 
     }); 
     require(["Scripts/app/js/app"]); 
</script> 

這裏我EXPL icitly告訴require.js在哪裏可以找到爲我想用，在這種情況下lodash.js庫的源代碼。只有當所有的路徑映射完成，我需要指示要加載app.js

II）app.ts

/// <reference path="../../typings/index.d.ts" /> 
    import * as _ from "lodash"; 
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll"); 

對於類型定義的正常工作，你必須包括reference標籤

就是這樣。

爲了測試是否一切工作，我必須使用是檢查控制檯，看到一切正常：

一兩件事，還不是很清楚，我是所有的幕後魔法的作品，但看看爲app.js生成的js代碼，我想第三個依賴「lodash」在require.config

define(["require", "exports", "lodash"], function (require, exports, _) { 
    "use strict"; 
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll")); 
}); 

哦，還有最後一件事，如果你不希望有在您的TS文件reference標籤，當您需要使用d.ts文件，你可以在路徑中tsconfig.json文件添加到您的index.d.ts像這樣：

{ 
    "compilerOptions": { 
    "sourceMap": false, 
    "target": "es5", 
    "module": "amd", 
    "outDir": "js" 
    }, 
    "include": [ 
    "src/**/*.ts", 
    "../typings/index.d.ts" 
    ] 
} 

Answer 1

首先，我要指出的是，打字稿不力您使用jQuery作爲一個模塊。你可以在技術上將它用作全球性的。

你說得對，jQuery不是作爲TypeScript模塊寫的。但有兩件事可以拿走：

1. jQuery是寫在一個格式，以便它可以在像CommonJS，AMD/Require.js等模塊系統中使用。由於TypeScript覆蓋了ES6模塊以將這些系統抽象出來，因此它更易於使用。
2. 未使用TypeScript編寫的庫可以使用TypeScript 聲明文件（也稱爲.d.ts文件）進行描述。這些文件告訴TypeScript有關已存在的JavaScript代碼，以便您可以獲得更好的工具和錯誤檢測。

（2）即使您不決定使用模塊也適用。但是通過這種組合，您可以使用TypeScript按照您指定的方式使用jQuery。

首先，讓我們的申報文件的jQuery：

npm install -S @types/jquery 

蝙蝠，你應該能夠引用的jQuery的打字稿。如果沒有，你tsconfig.json添加"jquery"到"types"領域如下：

{ 
    "compilerOptions": { 
     "types": ["jquery"] 
    } 
} 

在這一點上，只要你的文件不使用任何進口/出口，你可以使用jQuery你已經以同樣的方式總是使用它。

如果你這樣做，請確保你仍然在你的HTML中使用一個<script>標籤用於jQuery。現在

---

，你仍然可以決定使用模塊 - 在這種情況下，這變得更復雜，你需要選擇你要使用的模塊系統。

一般來說，在新的JavaScript中使用模塊被認爲是最佳實踐，但它可能會感覺有點壓倒性。這不是TypeScript的問題，而是生態系統中的實踐如何圍繞模塊出現的問題。

---

如果您正在使用的WebPack或Browserify，然後在您的tsconfig.json添加"module": "commonjs"到您的編譯器選項。然後，你可以只寫

npm install -S jquery 

而且用的WebPack將ts-loader把剩下的事情。有關如何設置Webpack的信息，請參閱our guide here。請注意，在鏈接設置中，您仍然需要爲您決定添加到externals字段的任何庫使用<script>標記。

---

如果使用Require.js，在tsconfig.json添加"module": "amd"編譯器選項。 Require.js需要一些配置才能開始，但我們有使用AMD模塊的a guide here。

你必須讓Require.js知道在哪裏進口到jQuery的應該被重定向到像這樣：

這可以在自己的.ts文件名爲require-config.ts

declare var require: any; 
require.config({ 
    paths: { 
     "jquery": "Scripts/externals/jquery-3.1.1", 
    } 
}); 

，然後去您可以將相應的腳本標記添加到您的頁面：

<script src="./Scripts/externals/require.js"></script> 
    <script src="./Scripts/app/require-config.js"></script> 
    <script> 
     require(["Scripts/app/app"]); 
    </script>