全局模塊名稱

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

您的代碼混合了 javascript 和 typescript。 您正在從打字稿構建一個縮小的 javascript 文件，然后進一步編寫 javascript（ var a = new MYLIB.MyClass(); ）。 這讓我感到困惑，因為通常你會用一種或另一種方式編寫所有代碼。 也就是說，javascript 沒有任何命名空間的概念，所以new MYLIB.MyClass()是無效的。 另一方面，命名空間確實存在於打字稿中，因此如果您在打字稿的上下文中使用該類，則可以使用該語法： https : //www.typescriptlang.org/docs/handbook/namespaces.html

另請參閱此答案以了解有關如何在純 javascript 中部分偽造名稱空間的信息。 基本上，javascript 中的“命名空間”只是一個像任何其他對象一樣的對象，這就是new namespace.myClass()不起作用的原因； 您不能在對象上放置類定義。

Answer 2

僅使用 Grunt 沒有找到任何簡單的解決方案，然后我轉向 webpack 並使用

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

我知道 webpack 和 grunt 的使用方式不同，但不知何故我們可以同時使用兩者。 我還將看看 webpack/gulp 對。 感謝所有讀者和@see shaper花時間回答。 在家里保持安全。