如何在Webpack中正确使用命名空间Typescript [英] How to use Namespace Typescript properly with Webpack

问题描述

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

I am working on a new project with webpack. This is my first try with this tool.

从1年开始，我就一直使用typescript(针对angularJS 1.5)进行开发，而我的命名空间从未遇到任何问题.

I used to develop with typescript (for angularJS 1.5) since 1 year and I never had any problems relating to my namespacing.

// 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();

如果我要导入更多文件怎么办.我不能导入多个应用程序"变量，并且我不想在每次导入时都使用别名.

What if I have more file to import. I can't import more than one "App" variable and I don't want to make alias each time I'm processing an import.

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

This is the case I don't want and I would like to fix :

// 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感到困惑吗?如何像使用webpack的PHP那样使用名称空间?

Am I wrong with something or did I mess something about webpack ? How can I play with namespace like in PHP with webpack ?

编辑2016年22月22日下午6:26

我了解到无法通过Webpack使用名称空间.为什么 ?因为每个.ts文件都被视为具有自己作用域的模块.

I learnt that it is not possible to use namespace using webpack. Why ? Because each .ts file are considered as a module with its own scope.

需要开发模块.

我找到了一种使用模块而不是名称空间来清除文件调用的解决方案.

I've found a solution to get my file call clearer using module instead of namespace.

就我而言，我有App/Core，其中包含Http，Service，Factory，Provider ...文件夹.在Core文件夹的根目录下，我创建了一个index.ts文件，该文件使用模块体系结构导出了所有需要的文件.让我们看看.

In my case, I have App/Core which contains Http, Service, Factory, Provider... folders. At the root of Core folder I created a index.ts file which export all my needed files with module architecture. Let's see.

// 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的模块.

And in another file call import the module with the alias 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文件都被认为是具有自己范围的模块.

I learnt that it is not possible to use namespace using webpack. Why ? Because each .ts file are considered as a module with its own scope.

需要开发模块.

我找到了一种使用模块而不是名称空间来清除文件调用的解决方案.

I've found a solution to get my file call clearer using module instead of namespace.

就我而言，我有App/Core，其中包含Http，Service，Factory，Provider ...文件夹.在Core文件夹的根目录下，我创建了一个index.ts文件，该文件使用模块体系结构导出了所有需要的文件.让我们看看.

In my case, I have App/Core which contains Http, Service, Factory, Provider... folders. At the root of Core folder I created a index.ts file which export all my needed files with module architecture. Let's see.

// 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的模块.

And in another file call import the module with the alias 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中正确使用命名空间Typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！