Búsqueda de sitios web

javascript - Exponer módulo al objeto global Window con Webpack y Typescript


Estoy utilizando webpack para procesar y empaquetar mis módulos de TypeScript, pero necesito que algunos módulos/fragmentos estén disponibles desde el exterior. ¿Cómo puedo hacer esto?

Información adicional

El código está dividido en diferentes directorios, uno para cada página(/componente). Cada página contiene varios archivos, y cada archivo contiene un módulo. Se ve algo así:

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

Los módulos de TypeScript se definen así

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

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

}

Y estoy usando gulp-webpack para compilar y agrupar los módulos de cada página:

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'))
});

Ahora necesito que Module1.someFunc() sea accesible desde el ámbito global, para que pueda ser utilizado por otros componentes (externos). He visto el loader de exposición, pero no veo cómo eso podría funcionar en esta situación.

¡Cualquier ayuda será apreciada!

Respuesta #1

De todos modos, descubrí cómo hacerlo con el cargador expose. En un entry.ts usé:

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

Lo que hizo que la función estuviera disponible a través de M1.Module1.someFunc() desde el exterior. Tanto mi IDE como gulp-webpack dieron un error, pero al final de alguna manera aún funcionó. ¡Suficiente para mí!