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 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"
    }
}

打字.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");
    }])

索引.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>

测试类.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，这是一个前端友好的模块系统。

最好深入了解所有编译器选项，看看是否有更多与您的项目相关的选项。一般来说，从长远来看，从严格的空检查开始新项目并且没有任何隐含的检查将对您有所帮助。

于 2017-01-14T15:56:38.060 回答