RequreJS、TypeScriptを使用してReduxをASP.NET MVCプロジェクトにインポートする（エラー： "redux"のスクリプトエラー...）

Question

私のASPで動作するRedux状態ライブラリの基本的な例を取得しようとしていますTypeScriptとRequireJSを使用した.NET MVCアプリケーション。

非常に単純なアプリケーションです。新しいASP.NET MVCプロジェクトを作成しました。そこから多くを取り除き、ノードモジュール（Redux、RequireJS）と実行したいスクリプトのみを持っています（Question.ts）に準拠しています。

Question.ts

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

import { combineReducers, createStore } from "redux"; 
const ADD_SELECTED_ANSWER = 'ADD_SELECTED_ANSWER'; 

function addSelectedAnswer(selectedQuestionId: number) { 
    return { type: ADD_SELECTED_ANSWER, selectedQuestionId } 
} 

function selectedAnswers(state = [], action) { 
    switch (action.type) { 
     case ADD_SELECTED_ANSWER: 

      var nextState = state; 

      nextState.push(state); 

      return nextState; 

     default: 
      return state; 
    } 
} 

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

var store = createStore(questionApp); 

// Log the initial state 
console.log(store.getState()); 

// Every time the state changes, log it 
// Note that subscribe() returns a function for unregistering the listener 
let unsubscribe = store.subscribe(() => 
    console.log(store.getState()) 
); 

store.dispatch(addSelectedAnswer(100)); 

活字体は、以下の（Question.js）にこれをコンパイルします。

define(["require", "exports", "redux"], function (require, exports, redux_1) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    require.config({ 
     baseUrl: "./", 
     paths: { 
      "redux": "/node_modules/redux/dist/redux.js" 
     } 
    }); 
    var ADD_SELECTED_ANSWER = 'ADD_SELECTED_ANSWER'; 
    function addSelectedAnswer(selectedQuestionId) { 
     return { type: ADD_SELECTED_ANSWER, selectedQuestionId: selectedQuestionId }; 
    } 
    function selectedAnswers(state, action) { 
     if (state === void 0) { state = []; } 
     switch (action.type) { 
      case ADD_SELECTED_ANSWER: 
       var nextState = state; 
       nextState.push(state); 
       return nextState; 
      default: 
       return state; 
     } 
    } 
    var questionApp = redux_1.combineReducers({ 
     SelectedAnswers: selectedAnswers 
    }); 
    var store = redux_1.createStore(questionApp); 
    // Log the initial state 
    console.log(store.getState()); 
    // Every time the state changes, log it 
    // Note that subscribe() returns a function for unregistering the listener 
    var unsubscribe = store.subscribe(function() { 
     return console.log(store.getState()); 
    }); 
    store.dispatch(addSelectedAnswer(100)); 
}); 
//# sourceMappingURL=Question.js.map 

私は順番に、ちょうどhttp://localhost:50830/、ホームコントローラにナビゲートしていますReduxをインポートし、Reduxメソッドの基本ディスパッチを実行して状態を変更する必要があるこの基本スクリプトを実行します。ランニング時に

、私は下のエラーを取得しています：私はimportまたはRequireJS basePathまたはpaths構成に提供してきた構成

require.js:168 Uncaught Error: Script error for "redux", needed by: Question

どんなにを、私は活字体を得るように見えることはできません自分のReduxモジュールを見つけることができるようにコンパイルしてください。

ビューは単純です：

Index.cshtml

@{ 
    ViewBag.Title = "Home Page"; 
} 

Please execute my Redux! 

@section scripts 
{ 
    <script data-main="/Scripts/Question.js" src="~/node_modules/requirejs/require.js"></script> 
} 

これは、ソリューションの構造である：私は活字体をコンパイルするには取得できますか

私Question.tsファイルをロードしてredux.jsにロードできますか？ https://s3.amazonaws.com/helpme123123/Redux+Playground.zip

Answer 1

OK、私はこの時初めて見たとき、私はかなり難しい明白なことを逃した：それはこれを理解するために私を助けるために誰かを助けている場合

はここで、ソリューションファイルへのリンクです。私は何が間違っているのか、それをどう修正するのかを説明しようとします。

最初の問題

はあなた main、 "Scripts/Question"が再来に依存モジュールが（モジュールはトップレベル importか export文を含む任意のファイルである）であるということです。モジュールの依存関係は、それ自身が実行される前に解決されなければなりません。しかし、このモジュールには、最初にそれらを解決するために必要なRequireJS構成が含まれています。

transpiled Scripts/Question.jsは

define(["require", "exports", "redux"], function (require, exports, redux_1) { 
    "use strict"; 
    require.config({ 
     baseUrl: "node_modules/" 
    }); 
    var ADD_SELECTED_ANSWER = 'ADD_SELECTED_ANSWER'; 
    function addSelectedAnswer(selectedQuestionId) { 
     return { type: ADD_SELECTED_ANSWER, selectedQuestionId: selectedQuestionId }; 
    } 
    // etc. 
}); 

であり、それは私たちの主要な問題です。 require.configは、Question.jsが読み込まれた後でのみ呼び出されます。しかし、それが起こるためには、RequireJSは明らかに還元を行いロードする必要があります。

この問題を解決するには、その構成に依存するモジュールをロードする前に、ローダーRequireJSを設定する必要があります。

だから最初、私たちは、以下の内容

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

require(["Scripts/Question"],() => { 
    console.log("bootstrapped"); 
}); 

でこのファイルについて注意すべきいくつかのことが

1. あるそれはセット、Scripts/Main.jsを言って、新しいファイルにrequire.configコールを移動しますbaseUrlを"/"に設定します。つまり、Scriptsとnode_modulesの両方です。両方の場所からコードをロードする必要があるため、これは重要です。

2. これは、reduxを明示的にマッピングします。 RequireJSやSystemJSのようなローダーはブラウザ指向です。 「depsはノードモジュールと呼ばれるフォルダにあり、エントリポイントはpackage.jsonで指定されています」などのサーバー側のJavaScript規約を前提としていません（これらは明示的であり、好きです）

3. ローダは実際にプライマリエントリモジュールを使用してそれを呼び出します。 IIRCにはこれを行うよりエレガントな方法がありますが、私は現時点でそれを覚えていません。

今、私たちは単に代わりにScripts/Question.js

<script data-main="/Scripts/Main.js" src="~/node_modules/requirejs/require.js"></script> 

のScripts/Main.jsをロードし、Scripts/Question.js