使用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()在全局范围内可访问，这样它就可以被其他（外部）组件使用。我查看了expose loader，但我不知道它在这种情况下如何工作。

非常感谢您的帮助！

- Duncan Lukkenaer

Answer 1

我无论如何都找到了使用expose loader的方法。在entry.ts中，我使用了以下代码：

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

这使得函数可以通过M1.Module1.someFunc()在外部使用。我的IDE和gulp-webpack都报错了，但最终它还是以某种方式工作了。对我来说已经足够好了！

- Duncan Lukkenaer

---

你能不用 import x = 这部分，只用 require 吗？ - undefined

这似乎也可以作为 import "expose-loader?M1!./module1" 的功能。 - undefined