1

私は webpack とタイピングが初めてで、新しいプロジェクトをセットアップしようとしています。

webpack をグローバルにインストールしました。

問題は

  1. entrypoint.ts のコードを次のようなモジュールに入れることはできません

    モジュール taxCalculator{ [.....entrypoint.ts コード.......] }

  2. ポイント1を回避するとwebpackビルドは正常に機能しますが、mainPageControllerの作成中にentrypoint.tsでtestClassを使用できません。アプリケーションをロードすると、コンソールに次のエラーが表示されます。

    taxCalculator.bundle.js:13307 ReferenceError: taxCalculator が定義されていません

  3. 私の entrypoint.ts と 2013 では、「require」テキストの下に赤いエラー行が表示されます。

私はすでにインターネットで多くのことを参照しましたが、何も見つけることができず、4〜5時間無駄にしました。誰かが私が間違っていることを教えてくれますか.

以下は、参照用の私のファイルです。

パッケージ.json

{
  "name": "taxcalculator",
  "version": "1.0.0",
  "description": "To Calculate Tax",
  "scripts": {
    "build": ""
  },
  "author": "temp",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "1.3.3",
    "typescript": "2.0.0",
    "typings": "2.1.0",
    "webpack": "1.14.0"
  },
  "dependencies": {
    "angular": "1.5.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5"
    }
}

型付け.json

{
  "dependencies": {
    "angular": "registry:dt/angular#1.5.0+20170111164943"
  }
}

entrypoint.ts

/// <reference path="../../typings/index.d.ts"/>
/// <reference path="TestClass.ts"/>

    var angular = require('angular');
    var app = angular.module('taxCalculatorApp', []);

    app.controller("mainPageController", ["$scope", function(scope) {
        scope.testString = "My String Value";

        scope.myObj = new taxCalculator.TestClass("Constructor string");
    }])

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf8"/>
    <title>Tax Calculator</title>
</head>
<body>
<div ng-app="taxCalculatorApp">
    <div ng-controller="mainPageController">
        <div>{{testString}}</div>
        <div>{{myObj.myString}}</div>
    </div>
    Loading.....!!
</div>
    <script src="../dist/taxCalculator.bundle.js"></script>
</body>
</html>

testclass.ts

module taxCalculator {
    export class TestClass {
        constructor(public myString) {

        }
    }
}
4

1 に答える 1

2

tsConfig ファイルの compilerOptions セクションに、次を追加します。

"moduleResolution" : "node", // or "classic"
"module" : "amd",

このmoduleResolutionセクションは、tsc コンパイラがモジュールを検索する方法を決定します。完全な説明はtypescript docsにあります。

このmoduleセクションでは、各モジュールがどのように書き出されるかについて説明します。デフォルトCommonJSでは、これはあなたが望むものではありません。amdおそらく、フロントエンドに適したモジュール システムであるはずです。

すべてのコンパイラ オプションを詳しく調べて、プロジェクトに関連するオプションがないかどうかを確認することをお勧めします。一般に、厳密な null チェックを使用して新しいプロジェクトを開始し、暗黙的な anyを使用しないことは、長期的には役立ちます。

于 2017-01-14T15:56:38.060 に答える