Question

我是webpack和打字的新手，我正在尝试设置新项目。

我已全局安装了网络包。

问题是

即使它不允许我将entrypoint.ts的代码放在像
这样的模块中
module taxCalculator { [..... entrypoint.ts代码.......] }
当我避开第1点时，webpack构建工作正常但我在创建mainPageController时无法在entrypoint.ts中使用testClass。当我加载应用程序时在控制台中获得以下错误：

taxCalculator.bundle.js：13307 ReferenceError：taxCalculator未定义
在我的entrypoint.ts vs 2013中显示了＆＃39;下面的红色错误行＆＃39;文本。

我已经在互联网上提到了很多，但找不到任何东西，浪费了4-5个小时，有人可以指导我做错了。

以下是我的档案供参考。

的package.json

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

tsconfig.json

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

typings.json

/// <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");
    }])

entrypoint.ts

<!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>

的index.html

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

        }
    }
}

testclass.ts

FirebaseInstanceId.getInstance().getToken();

Answer 1

在tsConfig文件的compilerOptions部分中，添加以下内容：

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

moduleResolution部分确定tsc编译器如何查找模块。完整说明可在typescript docs上找到。

module部分描述了如何写出每个模块。默认情况下，这将是CommonJS，这不是您想要的。它应该是amd，这是一个前端友好的模块系统。

最好采取更深入的look at all the compiler options，看看是否还有更多与您的项目相关的内容。通常，从严格空检查开始新项目和不隐含任何将从长远来看帮助您。

Webpack，typescript和angularjs：创建新项目时出现问题

1 个答案: