Actualmente estoy tratando de comenzar a usar el paquete web y me encontré con el error "Error de referencia no detectado: printMe no está definido" al intentar llamar a mi método "init" desde HTML usando la etiqueta onload a pesar de exportar los métodos. Mis archivos son los siguientes:
print.js (ubicado en /resources/static):
export function printMe() { console.log("Hi"); }index.js (ubicado en /resources/static):
import {printMe} from "./print"; export function component() { const element = document.createElement('div'); const btn = document.createElement('button'); btn.innerHTML = 'Click me and check the console!'; btn.onclick = printMe; element.appendChild(btn); return element; } export function init() { console.log("init ran"); } document.body.appendChild(component());webpack.config.js:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { index: './resources/static/index.js', }, devtool: 'inline-source-map', plugins: [ new HtmlWebpackPlugin({ title: 'Output Management', }), ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean:true, }, };index.html (ubicado en /dist):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Output Management</title> <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="index.bundle.js"></script></head> <body onload="init()"> </body> </html>index.bundle.js (ubicado en /dist) No voy a incluir este archivo porque no creo que sea necesario para la solución, aunque es importante tener en cuenta que en realidad está allí. Cualquier ayuda es apreciada
Aunque diga export , creo que el paquete web no lo incluye en su paquete, ya que nunca usa la función en el código JavaScript. Necesitará un complemento para monitorear su HTML o usar addEventListener en el cuerpo para agregar un controlador de eventos "onLoad".
La forma más sencilla de hacer esto es con el detector de eventos (no incluya paréntesis después de init ; consulte ¿Por qué se ejecuta el método inmediatamente cuando uso setTimeout? ):
document.body.addEventListener('load', init);