Question

Person.ts：

export class Person {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  get name(): string {return this._name};
}

test.ts：

import {Person} from "./Person";

var user = new Person("John");
document.getElementById("h1").innerHTML = user.name;

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5"
    ,"outDir" : "build"
  }
}

在Chrome中打开结果时，控制台上会显示以下错误：

Uncaught ReferenceError: exports is not defined
at test.js:2

Answer 1

我的解决方案基于以下答案：https://github.com/depcheck/depcheck#false-alert

安装requireJs
```
npm install requirejs
```

在html页面中包含requireJs

<h1 id="h1"></h1>
<script src="../node_modules/requirejs/require.js" data-main="test.js"></script>

使用amd arg：
模块编译代码
```
tsc -module amd
```

Answer 2

您需要使您的应用与浏览器兼容。例如使用webpack：

> npm install webpack -g
> webpack build/test.js bundle.js

并在你的HTML中

<script src="/bundle.js"></script>

Typescript编译将使用commonjs模块分辨率编译您的文件，哪个在浏览器中不起作用（nodejs使用commonjs）。 Webpack是捆绑器的一个示例，它将带您进入应用程序并使其准备好浏览器。

Answer 3

转换后的代码如下：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Person = (function () {
        function Person(name) {
            this._name = name;
        }
        Object.defineProperty(Person.prototype, "name", {
            get: function () { return this._name; },
            enumerable: true,
            configurable: true
        });
        ;
        return Person;
    }());
    exports.Person = Person;
});

然而，如果你看到这需要浏览器理解模块系统，在这种情况下需要了解js。如果您希望您可以只使用它来使用它 - 它是完美的ES5代码。

var Person = (function() {
  function Person(name) {
    this._name = name;
  }
  Object.defineProperty(Person.prototype, "name", {
    get: function() {
      return this._name;
    },
    enumerable: true,
    configurable: true
  });;
  return Person;
}());

typescript - 简单模块示例失败

3 个答案: