Estoy agrupando una clase JS, usando webpack-4, pero no puedo acceder a ninguno de sus métodos y propiedades desde fuera de su alcance. Seguí algunas de las sugerencias dadas aquí, pero todavía estoy atascado. A continuación, verá una versión simplificada de lo que necesito lograr. Cualquier sugerencia sobre cómo hacer que esto funcione sería muy apreciada. ¡Gracias!
My webpack.config:
output: { filename: '[name].js', path: path.resolve(__dirname, '../../assets/js'), library: 'MyModule', libraryTarget: 'var', }, The class file, Main.js:
export class Main{ prop1 = 'This is Main.prop1'; static hello = ()=>{ console.log('Hello from Main'); } static hi = function(){ console.log('Hi from Main'); } } Inside test.html:
<script src="./Main.js"></script> <script> window.onload = function(){ var mainUX = MyModule; console.log(mainUX); // see output below** console.log(mainUX.prop1) // outputs 'undefined' mainUX.hello(); // Outputs Uncaught TypeError: mainUX.hello is not a function mainUX.hi(); }; </script> ** In the console I get:
Object { Main: Getter, … } Main: __esModule: true Symbol(Symbol.toStringTag): "Module" <get Main()>: function js() <prototype>: Object { … } __defineGetter__: function __defineGetter__() __defineSetter__: function __defineSetter__() __lookupGetter__: function __lookupGetter__() __lookupSetter__: function __lookupSetter__() __proto__: constructor: function Object() hasOwnProperty: function hasOwnProperty() isPrototypeOf: function isPrototypeOf() propertyIsEnumerable: function propertyIsEnumerable() toLocaleString: function toLocaleString() toString: function toString() valueOf: function valueOf() length: 0 name: "valueOf"En lugar de <script src="./Main.js"></script> debería usar import Main from './main.js' en su última etiqueta de script
Después de un día entero tratando de encontrar una respuesta a mi problema, me encontré con este artículo . Es muy completo, fácil de seguir y mi problema se resolvió de inmediato. A continuación adjunto el código con las correcciones por si a alguien le resulta útil.
Tuve que cambiar el archivo webpack.config y agregar el default a la exportación de clase.
webpack.config:
output: { filename: '[name].js', path: path.resolve(__dirname, '../../assets/js'), library: '', libraryExport: '', libraryTarget: 'umd', globalObject: 'this', }, The class file, Main.js:
export default class Main{ prop1 = 'This is Main.prop1'; hello = ()=>{ console.log('Hello from inside MainUX'); } hi = function(){ console.log('Hi from Main'); } } Inside test.html:
// in the head: <script src="./Main.js"></script> // elsewhere in the html document <script> const Main = window.default; const mainUX = new Main(); console.log(Main) mainUX.hi(); </script>