使用 Webpack 和 Typescript 将模块公开给全局 Window 对象

Posted 2023-03-13

【中文标题】使用 Webpack 和 Typescript 将模块公开给全局 Window 对象

【英文标题】：Expose module to global Window object with Webpack and Typescript

【发布时间】：2017-04-16 14:58:30

【问题描述】：

我正在使用 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，但我不明白它在这种情况下如何工作。

任何帮助将不胜感激！

【参考方案1】：

无论如何，我想出了如何使用暴露加载器来做到这一点。在我使用的 entry.ts 中：

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

这使得该功能可以通过M1.Module1.someFunc() 从外部使用。我的 IDE 和 gulp-webpack 都抛出了错误，但最终它仍然以某种方式工作。对我来说已经足够了！

【讨论】：

如果没有 import x = 部分，你能逃脱吗，只需要需要吗？

这似乎也只是import "expose-loader?M1!./module1"