我正在使用 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
关于angular - 如何在 Webpack 中正确使用 Namespace Typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38521466/