使用Webpack和Typescript將模塊公開到全局Window對象

Question

我正在使用webpack處理和捆綁我的TypeScript模塊，但是我需要一些模塊/塊才能從外部使用。 我該怎么做呢？

---

附加信息

該代碼分為不同的目錄，每個頁面（/組件）一個。 每個頁面包含幾個文件，每個文件包含一個模塊。 看起來像這樣：

 js/
  ├ page1/
  | ├ entry.ts
  | ├ module1.ts
  | └ module2.ts
  ├ page2/
  | ├ entry.ts
  | ├ module3.ts
  | └ module4.ts  

TypeScript模塊的定義類似於

import {Module2} from "./module2";
export module Module1 {

    export function someFunc():int {
        return Module2.someVal;
    }

}

我正在使用gulp-webpack編譯和捆綁每個頁面的模塊：

gulp.task('javascript', function () {
    return gulp.src('src/js/**/entry.ts')
        .pipe(named(function (file) {
            // Sets file.named to the containing directory name (used by webpack)
            return path.dirname(file.path).substr(path.dirname(file.path).replace(/\\/g, '/').lastIndexOf('/') + 1);
        }))
        .pipe(webpack({
            resolve: {
                extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
            },
            module: {
                loaders: [
                    {test: /\.tsx?$/, loader: 'ts-loader'}
                ]
            },
            plugins: [
                new CommonsChunkPlugin({
                    name: "bundle",
                    minChunks: 3
                })
            ],
            output: {
                filename: '[name].js'
            },
            devtool: 'source-map'
        }))
        .pipe(gulp.dest('dest/js'))
});

現在，我需要從全局范圍訪問Module1.someFunc() ，以便其他（外部）組件可以使用它。 我已經看過了暴露加載器 ，但是在這種情況下我看不到它如何工作。

任何幫助將不勝感激！

Answer 1

我想通了如何使用暴露的加載器。 在entry.ts中，我使用了：

import x = require("expose-loader?M1!./module1");

通過M1.Module1.someFunc()使函數可用。 我的IDE和gulp-webpack都拋出了一個錯誤，但最終還是可以正常工作。 對我來說足夠好了！