如何在 Webpack 中正确使用命名空间 Typescript

我正在使用 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

我了解到使用 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