RequiresJsを使用してtypescriptモジュール（asp.net mvc/visual studio環境）をロードする方法

Question

2つのファイル：test1.tsとtest2.tsがあるとします。

import { x } from './test2' 

alert(x); 

私はアプリケーションを実行すると、私はこのエラーを取得：Uncaught ReferenceError: exports is not defined at test1.js:2は

export const x = 1 

これはTEST1の内容は次のとおりです。これは、TEST1の内容です。

他の投稿によると、このエラーは、Webブラウザがexportおよびrequire(...)をサポートしていないという事実によって引き起こされます。これを解決するには、解決策の1つは、RequireJsのようなものを使用することです。

私はいくつかの読みをしました。 This articleは私が理解するのが最も簡単でした。

1. 私は_Layout.cshtmlファイルに次の行を追加しました。

   <script src="~/Scripts/require.js"></script>

2. 設定ファイルを作成します。

   requirejs.config({ 
       baseUrl: '/Scripts/js' 
   }); 
   

3. 私は/Scripts/jsフォルダにtest1のとTEST2を入れています。

4. アプリケーションを実行しても、同じエラーが発生します。Uncaught ReferenceError: exports is not defined at test1.js:2。 RequireJsを使用してエラーを修正する方法

？

ありがとうございます。

EDIT

ソリューションはRequireJsである必要はありませんが、何も問題を修正します。 typescriptには非常に多くの偉大なチュートリアルがありますが、それらはすべて人々がノードまたはangularjを使用していることを前提としています。私が必要とするのは、私のasp.net mvcアプリケーションにいくつかのタイスクリプトを追加することです。それが1つのファイルである限り、状況は良好でした。今度はコードの一部を再利用したいので、別のファイルにまとめました。残念ながら、私はそのエラーのために前進することはできません。私は3日間そこに座っていました。

EDIT 2

私は今、私はこのエラーを取得しています、あなたは@artemにより示唆されるようにamdの

{ 
    "compilerOptions": { 
    "module": "amd", 
    "noImplicitAny": true, 
    "removeComments": true, 
    "preserveConstEnums": true, 
    "sourceMap": true 
} 

}

をcommonJsを追加しました。

Uncaught Error: Mismatched anonymous define() 
module: function (require, exports, CommonTypes_1) { 
//... 

this questionは同じ問題を扱っているようです。私はこのファイルを新しいファイルに入れるべきですか？

Answer 1

私はこれが少し古いと知っていますが、この問題に直面しました。ここで私はそれを解決した方法です。

この投稿は、とても役に立ちました：https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project

まず、あなたのBundleConfig.csにrequire.jsを追加します。私のものは次のようになります：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js", 
    "~/Scripts/require.js")); 

次に、バンドルの後に_Layout.cshtmlが "scripts"セクションをレンダリングしていることを確認してください。私の場合、次のようになります。

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false) 

次に、スクリプトセクションを以下のようにレンダリングします。私Index.cshtmlは、次のようになります。

@section scripts 
{ 
    <script> 
     require(["Scripts/Init"], 
      function (Init) { 
       Init.Start(); 
      } 
     ); 
    </script> 
} 

私の〜/スクリプト/ Init.tsファイルは次のようになります。必要に応じて

import * as DataBind from "./DataBind" 

export function Start() { 
    DataBind.SetAllDatabinds(null); 
} 

そこから、すべてのあなたのモジュールをロードすることができます。私が見つけた重要なことは、あなたのTypeScriptファイルに "loose code"がないことです（例では "alert（x）"）。すべてを輸出する必要があります。