全局模块名称

Question

我想知道如何将命名空间声明添加到我的 js 包中。

我在 myclass.ts 中有 typescript 类

export class MyClass{
...
}

我在其他文件中使用这个类

export {MyClass} from "myclass"
...
let a:MyClass = new MyClass();

我将它编译成 vs 代码并使用 grunt 自动连接不同文件并使用 terser 最小化。

一切都很好，除了我想在 js 中使用它时在我的类之前有一个命名空间

<script src="mylib.min.js"></script>
...
var a = new MYLIB.MyClass();

在这个过程中，我应该在哪里引入“MYLIB”命名空间？ 我想继续研究导出/导入模式，所以我不想在 TS 文件中包含命名空间或模块名称。

是否有一个 grunt 插件可以这样做？我没有找到关于该主题的任何明确信息或示例。

Answer 1

仅使用 Grunt 没有找到任何简单的解决方案，然后我转向 webpack 并使用

output: {
    library: 'MYLIB',
    libraryTarget: 'var',
    filename: '[name].' + config.version + '.js' ,
    path: path.resolve(__dirname, 'dist'),
}

我知道 webpack 和 grunt 的使用方式不同，但不知何故我们可以同时使用它们。我也会看看 webpack/gulp 对。感谢所有读者和@see shaper 花时间回答。在家里保持安全。

Answer 2

您的代码混合了 javascript 和 typescript。您正在从 typescript 构建一个缩小的 javascript 文件，然后编写进一步的 javascript (var a = new MYLIB.MyClass();)。这让我感到困惑，因为通常你会以一种或另一种方式编写所有代码。也就是说，javascript 没有任何命名空间的概念，因此 new MYLIB.MyClass() 无效。另一方面，命名空间确实存在于 typescript 中，因此如果您在 typescript 的上下文中使用该类，则可以使用该语法：https://www.typescriptlang.org/docs/handbook/namespaces.html

另请参阅this answer，了解如何在纯 JavaScript 中部分伪造命名空间。基本上，javascript 中的“命名空间”只是一个与其他对象一样的对象，这就是 new namespace.myClass() 不起作用的原因；您不能将类定义放在对象上。