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.jsymy-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).
