使用Redux，Typescript在JS模塊的不同文件夾中輸入。如何判斷模塊在哪裏？

Question

我在我的應用程序中使用Redux。我使用Visual Studio 2015和npm將Redux作爲依賴項下載。

我有以下文件夾結構：

MySolution.sln 
├── node_modules 
│ ├── redux 
│ │ ├── index.d.ts 
| | ├── dist 
│ │ | ├── redux.js 
│ │ | ├── redux.min.js 
├── Scripts 
│ ├── myscript.ts 
│ ├── myscript.js 

的終極版的節點結構是使用NPM

NPM安裝終極版

我有一個打字稿下載當談到腳本（myscript.ts），使用Redux，我從它導入createStore和combineReducers。

myscript.ts

/// <reference path="../node_modules/redux/index.d.ts" /> 
import { combineReducers, createStore } from "../node_modules/redux/index"; 

//... more code 
const myApp = combineReducers({ 
    SelectedAnswers: selectedAnswers 
}); 

var store = createStore(myApp); 

來編譯以下（myscript.js）：

define(["require", "exports", "../node_modules/redux/index"], function (require, exports, index_1) { 
    "use strict"; 
    var _this = this; 
    Object.defineProperty(exports, "__esModule", { value: true }); 

    var questionApp = index_1.combineReducers({ 
     SelectedAnswers: selectedAnswers 
    }); 

    var store = index_1.createStore(questionApp); 
}); 

正如你看到的，我的代碼使用導入腳本，這是由Visual Studio/TypeScript自動生成。

這對於編譯的目的很好，因爲它指向../../../node_modules/redux/index，它將允許它選取index.d.ts這是TypeScript打字文件（絕對鍵入）。

所以我的問題出現在應用程序實際運行時，Redux的真實腳本位於下一個文件夾中，因此當我運行我的腳本時，它告訴我模塊無法加載。

如何告訴TypeScript腳本在運行時存在於/redux？

我想，如果我在require.config對htat出現了打字稿名稱來確定它產生define()方法，我可以告訴RequireJS其中腳本，但這絲毫不會有任何效果：

require.config({ 
    baseUrl: "/", 
    paths: { 
     "../node_modules/redux/index": "../node_modules/redux/dist/redux" 
    } 
}); 

感謝您的幫助。

注：如果我將index.d.ts到同一個文件夾中redux.js並調用它redux.d.ts，但這不是它如何出現在故宮下載它工作正常。我不想在每次更新它時將它們移動到同一個文件夾中。

Answer 1

好吧，看來我的痛苦的主要來源是我混合了內部模塊和外部模塊的概念。

外部模塊通常不會被構成應用程序的TypeScript文件的掛毯中的相對路徑所引用，這些應在require.config()中指定。

內部模塊和TypeScript文件可以用相對路徑引用。

所以答案是redux，一個外部模塊，應該在TypeScript中用redux定義文件中指定的名稱引用。

import { combineReducers, createStore } = require("redux"); 

//... now we can use the imported external module 
const myApp = combineReducers({ 
    SelectedAnswers: selectedAnswers 
}); 

var store = createStore(myApp); 

你也必須確保你擁有分型爲你的外部模塊，我沒有這個，所以這引起了我的打字稿文件有錯誤Cannot find module 'redux'失敗編譯。於是我通過安裝一定類型的定義得到了分型，這允許將輸出文件進行編譯：

安裝，包裝反應，redux.TypeScript.DefinitelyTyped

看來，這是一般可大多數您可能想要導入的外部模塊，但是如果它們不是，您可以指定自己的定義（將它放在解決方案中的* .d.ts文件中），這將允許您使用TypeScript文件進行complile：

// This can be redux, or any other module that you'd like to use in require() to enable it to compile your TypeScript code 
declare module "redux" { 
    var _temp: any; 
    export = _temp; 
} 

當然，如果你這樣做，你將不會得到智能感知，所以TypeScript類型是首選。

當談到設置你require.config()屬性，這就是所謂的入口點到你的應用程序，你應該：

• 指定相對於你的外部模塊的位置，以您的baseUrl
• 指定您的內部模塊解析爲相對位置

這裏的切入點，我的例子中的一個例子（main.ts，編譯ŧ使用Ømain.js後）：

require.config({ 
    baseUrl: "/", // The base url 
    paths: { 
     // Named external module (redux in this case) 
     "redux": "../node_modules/redux/dist/redux" 
    } 
}); 

// Bootstrap the entry point module, notice that this is an 'internal module', hence the relative location being used as the module name 
require(["Scripts/myscript"],() => { 
    console.log("Your internal module has been resolved and should be running now!") 
}); 

這可以從應用程序的頁面中調用，像這樣：

<script "/node_modules/requirejs/require.js" data-main="scripts/main.js"></script>