Esta puede ser una pregunta para principiantes, sin embargo, después de investigar otras preguntas en la plataforma y profundizar en la documentación de Webpack, he visto muchas formas en que las personas han intentado esto. Realmente no he visto nada que pueda aplicar a mi problema.
Deseo usar Chart.js usando un paquete (Webpack). Al crear este archivo, almaceno la instancia en una variable. Vea los fragmentos de código a continuación para seguir.
src/index.js
import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); const myFirstChart = new Chart("test", { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] } }) webpack.config.js
module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js', } } index.ejs
<script src="../dist/index.js"></script> El gráfico no se carga después de compilarlo con el comando webpack . El problema al que me enfrento es que supondría que podría acceder a la instancia de este gráfico en mi consola, ya que deseo actualizar los datos después de la inicialización del gráfico.
Esperaría poder acceder a la variable myFirstChart como lo haría si Chart.js fuera un CDN o se cargara directamente.
¿Es esto algo que quizás he pasado por alto en la documentación de Chart.js o Webpack 5?
El objetivo de webpack es procesar módulos, y el objetivo de los módulos es no contaminar el espacio de nombres global. Si otro archivo de código JS necesita acceso a una variable, export donde se creó e import en ese otro archivo.
Las variables definidas en los módulos solo tienen un alcance de módulo; en general, se considera una mala práctica hacer uso del espacio de nombres global.
Si lo necesita absolutamente (y lo más probable es que lo esté haciendo mal si ese es el caso), agregue window.myFirstChart = myFirstChart; en su archivo index.js :
import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); const myFirstChart = new Chart("test", { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] } }) window.myFirstChart = myFirstChart; Cualquier variable que necesite estar disponible globalmente, debe publicarla explícitamente adjuntándola al objeto de la window global (que es donde el navegador las busca a menos que estén definidas en un lugar más local en cuanto a donde está tratando de acceder).