要求...现在出口未定义，我在这里缺少什么？答案

【问题标题】：Require... now exports is undefined, What am I missing here?要求...现在出口未定义，我在这里缺少什么？
【发布时间】：2018-09-03 07:27:33
【问题描述】：

真的很喜欢 TypeScript，跟着这个简单的sample，最后一部分“导出和导入概念”，砰！首先得到“JavaScript 运行时错误：需要未定义”。谷歌发现我需要安装 RequirJS，有意义，安装，绕过它。现在，'exports' 的相同未定义消息。

这是我经历过的：

我浏览了 SO 中的所有 3 个相关帖子， TypeScript Modules in Visual Studio 2015 Update 2 - 'require' is undefined

How to fix '0x800a1391 - JavaScript runtime error: 'require' is undefined'?

Typescript ReferenceError: exports is not defined

仍然没有解决。
添加类似this的TSConfig.json，同样。
下载了应该没问题的源代码，哈哈，他的结尾是'System' is undefined。 npm 是否安装了 SystemJS，得到“...打开 'C:...\package.json'，...没有描述，没有存储库，...，没有许可证。”好的，添加一个空的package.json，结果一样。

所以我的问题是：

我自己的项目在这里缺少什么？
TypeScript 是否需要 TSConfig.json 和 package.json？

我的项目，tsconfig.json：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

Customer.js

import { Address } from "./Address";

class Customer
{
    private _customerName: string = "";
    private _addressObj: Address = new Address();

    public set CustomerNameBase(value: string){
        this._customerName = value;
    }
    public get CustomerNameBase(){
        return this._customerName;
    }

    Validate()
    {
        this._addressObj.PlotNumber = 12;
        alert(this._addressObj.PlotNumber);
    }
}

class CustomerModified extends Customer
{
    Validate()
    {
        throw "throw from CustomerModified";
    }
}

Address.ts：

export class Address
{
    public PlotNumber: number;
}

Customer.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="./Address.js"></script>
    <script src="Scripts/require.js"></script>
    <script src="./customer.js"></script>
    <script>
        var customer = new CustomerModified();
        try
        {
            customer.Validate();
        }
        catch (exception)
        {
            alert("exception raised: " + exception);
        }
        finally
        {
            alert("finally.");
        }
    </script>
</body>
</html>

VS 2017 专业版 v15.1 (26403.3)

【问题讨论】：

我认为您正在编写 javascript，就好像它在 node.js 上运行一样，其中 require 和 import/export 是有意义的。您可能希望将所有 javascript 输出编译到 webpack 中。 Webpack 负责转换您的导入和导出，以便它们在浏览器中工作。

标签： typescript

【解决方案1】：

您正在使用import 和export，这意味着模块系统。默认情况下，TypeScript 会转译为 CommonJS 模块，但由于您使用 RequireJS 作为模块加载器，因此您需要使用 AMD 模块。

更改您的tsconfig.json 以指定您希望使用的模块格式。

{
  "compilerOptions": {
    "module": "amd",
    "strict": true,
    "target": "es5",
    "sourceMap": true
  },
  "exclude": ["node_modules", "wwwroot"],
  "compileOnSave": true
}

此外，您需要修复代码的另一个问题。当您在模块中定义某些内容时，它仅可用于导入它的代码。这意味着您的内联脚本应该被删除并替换为包含代码并导入它使用的内容的模块。请注意，无论如何，内联脚本都是一种不好的做法。但是，将引导代码内联如下是合理的。

<script src="Scripts/require.js"></script>
<script>
  require(["app.js"]);
</script>

现在在 app.ts 中添加内联脚本中的逻辑以及必要的导入

// app.ts 
import CustomerModified from "./customer";

var customer = new CustomerModified();
try {
  customer.validate();
}
catch (error) {
  alert(`error raised: ${error}`);
}
finally {
  alert("finally");
}

当然，为了使其工作，您需要导出 CustomerModified 以供您也忽略的其他模块使用。

export default class CustomerModified extends Customer {
  validate() {
  // if you throw a bare string you won't get a stack trace.
    throw Error("thrown from CustomerModified");
  }
}

请注意，在 JavaScript 中，左大括号的位置实际上很重要，并且应该是适当的，如上所示 - 这不是 C#。还希望您对除构造函数之外的所有内容都使用 lowerCamelCase - 这不是 C#。

【讨论】：

validate()\n{ 很好，只是代码风格不同。会给你带来麻烦的是return\n{}。
@AluanHaddad TS 通常与 CommonJS 一起使用，因为我使用了 import 和 export 所以它切换到 RequireJS 所以这就是为什么我得到了所有奇怪的东西？如果是这样，我有什么替代导入和导出的选项？
我按照建议做了所有事情，tsconfig.json：{ "compilerOptions": { "module": "amd", //"strict": true, "target": "es5", "sourceMap": true }, "exclude": ["node_modules","wwwroot"], "compileOnSave": true } 注意，即使在 npm 安装了最新 TS 的 nuget 之后，它也不喜欢“严格”选项。
Cusomer.ts：import Address from "./Address"; class Customer{ private _customerName: string = ""; private _addressObj: Address = new Address(); public set CustomerNameBase(value: string){ this._customerName = value; } public get CustomerNameBase(){ return this._customerName; } Validate(){ this._addressObj.PlotNumber = 12; alert(this._addressObj.PlotNumber); } } // original: class CustomerModified extends Customer export default class CustomerModified extends Customer { Validate() { throw "throw from CustomerModified"; } }
app.ts // app.ts import CustomerModified from "./Customer"; var customer = new CustomerModified(); try { customer.Validate(); } catch (exception) { alert("error raised: ${error}"); } finally { alert("finally."); } Customer.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="Scripts/require.js"></script> <script> require("app.js"); </script> </body> </html>