Блог

Это может быть вопрос новичка, однако после изучения других вопросов на платформе и изучения документации Webpack я видел много способов, которыми люди пытались это сделать. Я не видел на самом деле ничего, что я мог бы применить к своей проблеме.

Я хочу использовать Chart.js использование пакета (Webpack). Создавая этот файл, я сохраняю экземпляр в переменной. Смотрите приведенные ниже фрагменты кода, чтобы следовать им.

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

 lt;script src="../dist/index.js"gt;lt;/scriptgt;  

Диаграмма загружается без проблем после построения с помощью webpack команды. Проблема, с которой я сталкиваюсь, заключается в том, что я предполагаю, что смогу получить доступ к экземпляру этой диаграммы в своей консоли, поскольку я хочу выполнить некоторое обновление данных после инициализации диаграммы.

Я ожидал бы, что смогу получить доступ к переменной myFirstChart , как если бы Chart.js был CDN или загружен напрямую.

Является ли это чем-то, что я, возможно, упустил из виду в документации любого из Chart.js или Webpack 5?

Весь смысл webpack заключается в обработке модулей, и весь смысл модулей заключается в том, чтобы не загрязнять глобальное пространство имен. Если другому файлу кода JS требуется доступ к переменной, export укажите, где она создана, и import в этом другом файле.

Любые переменные, определенные в модулях, относятся только к области модулей; широко считается плохой практикой вообще использовать глобальное пространство имен.

Если вам это абсолютно необходимо (и вы, скорее всего, делаете это неправильно, если это так), добавьте window.myFirstChart = myFirstChart; свой 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;  

Любую переменную, которая должна быть доступна в глобальном масштабе, вам явно необходимо опубликовать, прикрепив ее к глобальному window объекту (именно там браузер ищет их, если они не определены в более локальном месте, где вы пытаетесь получить к ним доступ).