Webpack、typescript 和 angularjs：创建新项目时的问题答案

【问题标题】：Webpack, typescript and angularjs: issue while creating new projectWebpack、typescript 和 angularjs：创建新项目时的问题
【发布时间】：2017-05-29 17:39:26
【问题描述】：

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

我已经全局安装了 webpack。

问题是

即使它不允许我将 entrypoint.ts 的代码放在像这样的模块中

模块税计算器{ [.....entrypoint.ts 代码.......] }
当我避免第 1 点时，webpack 构建工作正常，但在创建 mainPageController 时我无法使用 entrypoint.ts 中的 testClass。当我加载应用程序时，控制台中出现以下错误：

taxCalculator.bundle.js:13307 ReferenceError: taxCalculator is not defined
在我的 entrypoint.ts vs 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"
    }
}

typings.json

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

入口点.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) {

        }
    }
}

【问题讨论】：

标签： angularjs typescript webpack typescript-typings ts-loader

【解决方案1】：

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

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

moduleResolution 部分确定 tsc 编译器如何查找模块。完整的描述可以在typescript docs找到。

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

最好深入了解look at all the compiler options，看看是否有更多与您的项目相关的信息。一般来说，从长远来看，使用严格的空值检查和没有任何隐含的新项目将帮助您。

【讨论】：

感谢您的回答，但即使在 tsconfig.json 中添加这两个后仍然无法正常工作，仍然在相同的地方面临同样的问题。
安德鲁你有机会再看一遍吗，我仍然面临这个问题。
抱歉，我没有。