angular - 如何在 Webpack 中正确使用 Namespace Typescript

Question

我正在使用 webpack 开发一个新项目。这是我第一次尝试使用此工具。

我从 1 年开始就使用 typescript(针对 angularJS 1.5)进行开发，我从来没有遇到过任何与我的命名空间相关的问题。

// src/App/Core/Http/Test.ts
export namespace App.Core.Http {
      export class Test {
          public attr:any;
      }
 }

// src/App/Bootstrap.ts
import { App } from "./Core/Http/Test";
let testInstance = new App.Core.Http.Test();

如果我有更多文件要导入怎么办。我不能导入多个“App”变量，而且我不想在每次处理导入时都使用别名。

这是我不想要的情况，我想修复:

// src/App/Bootstrap.ts
import { App } from "./Core/Http/Test";
import { App as App2 } from "./Core/Http/Test2"; // How can I import properly my namespace
let testInstance = new App.Core.Http.Test(),
    test2Instance = new App2.Core.Http.Test2();

我是不是做错了什么，还是我把 webpack 搞砸了？我如何像在 PHP 中一样使用 webpack 中的命名空间？

编辑 2016/22/07 下午 6:26

我了解到无法使用 webpack 使用命名空间。为什么 ？因为每个 .ts 文件都被视为具有自己范围的模块。

需要模块开发。

我找到了一个解决方案，使用模块而不是命名空间让我的文件调用更清晰。

在我的例子中，我有 App/Core，其中包含 Http、Service、Factory、Provider... 文件夹。在 Core 文件夹的根目录下，我创建了一个 index.ts 文件，它导出了我需要的所有具有模块架构的文件。让我们看看。

// src/App/Core/index.ts
export module Http {
      export { Test } from "src/App/Core/Http/Test";
      export { Test2 } from "src/App/Core/Http/Test2";
      export { Test3 } from "src/App/Core/Http/Test3";
 }

export module Service {
      export { ServiceTest } from "src/App/Core/Service/ServiceTest";
      export { ServiceTest2 } from "src/App/Core/Service/ServiceTest2";
      export { ServiceTest3 } from "src/App/Core/Service/ServiceTest3";
}
//src/App/Core/index.ts ----> EOF 

然后在另一个文件中调用导入别名为 Core 的模块。

// src/App/Bootstrap.ts
import { * as Core } from "./Core";

let TestInstance = new Core.Http.Test(),
    Test2Instance = new Core.Http.Test2(),
    TestInstance = new Core.Http.Test3();

let ServiceTestInstance = new Core.Service.Test(),
    ServiceTest2Instance = new Core.Service.Test2(),
    ServiceTestInstance = new Core.Service.Test3();

// src/App/Bootstrap.ts ----> EOF

Answer 1

我了解到无法使用 webpack 使用命名空间。为什么 ？因为每个 .ts 文件都被视为具有自己范围的模块。

需要模块开发。

我找到了一个解决方案，使用模块而不是命名空间让我的文件调用更清晰。

在我的例子中，我有 App/Core，其中包含 Http、Service、Factory、Provider... 文件夹。在 Core 文件夹的根目录下，我创建了一个 index.ts 文件，它导出了我需要的所有具有模块架构的文件。让我们看看。

// src/App/Core/index.ts
export module Http {
      export { Test } from "src/App/Core/Http/Test";
      export { Test2 } from "src/App/Core/Http/Test2";
      export { Test3 } from "src/App/Core/Http/Test3";
 }

export module Service {
      export { ServiceTest } from "src/App/Core/Service/ServiceTest";
      export { ServiceTest2 } from "src/App/Core/Service/ServiceTest2";
      export { ServiceTest3 } from "src/App/Core/Service/ServiceTest3";
}
//src/App/Core/index.ts ----> EOF 

然后在另一个文件中调用导入别名为 Core 的模块。

// src/App/Bootstrap.ts
import { * as Core } from "./Core";

let TestInstance = new Core.Http.Test(),
    Test2Instance = new Core.Http.Test2(),
    TestInstance = new Core.Http.Test3();

let ServiceTestInstance = new Core.Service.Test(),
    ServiceTest2Instance = new Core.Service.Test2(),
    ServiceTestInstance = new Core.Service.Test3();

// src/App/Bootstrap.ts ----> EOF