Búsqueda de sitios web

javascript - Exportar objeto desde typescript a través de webpack y usarlo en JS


Lo que estoy intentando hacer es empaquetar una biblioteca que he escrito en Typescript con Webpack 2 y poder usar esta biblioteca incluso con JS puro. La compilación va bien y sin errores, pero cuando se trata de usar el objeto exportado aparece como un objeto vacío {}.

Así que lo que he intentado hacer es lo siguiente:

  • Empaqueta la biblioteca en un archivo bundle.js
  • Crea un archivo my-js-script.js que registre en la consola el objeto exportado por el archivo .ts
  • Crea un archivo index.html
  • Importa ambos archivos bundle.js y my-js-script.js
  • Sirve el archivo index.html y ve el objeto en la consola.

Archivo de Typescript

import {SomeStuff} from 'some-stuff';

export class ClassA {
    constructor(){
        // Does other stuff with SomeStuff
    }
}

// What I want to achieve is something like this
export const myModule = new ClassA();

Pensé que crear un archivo HTML que importara el bundle y el archivo my-js-script sería suficiente para tener acceso a la constante myModule. Pero desafortunadamente no fue suficiente.

index.html

<html>
    <head>
        <script src="./bundle.js"></script>
        <script src="./my-js-script.js"></script>
    </head>
    <body>
    </body>
</html>

Archivo de Javascript

myModule.doSomething();

¿Qué me estoy perdiendo? ¿O simplemente no hay posibilidades de hacer eso? La configuración de webpack es extremadamente sencilla

var path = require("path");

module.exports = {
    entry: "./src/web-onion.ts",
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
}

Respuesta #1

No puedes hacer eso de esta manera. myModule no se exportará como global. Si quieres exportar algo globalmente, usa en el archivo TypeScript:

window.something = myModule

Nota: tendrás que extender la interfaz Window o usar (window as any).