如何从Browserify打包文件中获取抓取到的数据？

问题根源 #

Browserify会将Node.js风格的模块代码包裹在**立即执行函数(IIFE)**中，所有变量默认只存在于模块内部作用域，不会暴露到浏览器的全局window对象上。这就是你在HTML里无法直接访问artistArray的核心原因——Node环境中模块顶层作用域关联module.exports，但浏览器没有该机制，变量被完全封装在模块内部。

解决方案1：将变量挂载到全局window对象 #

修改你的main.js，在获取到榜单数据后，把artistArray赋值给window对象的属性，让它进入浏览器全局作用域：

const billboard = require('billboard-top-100');
let artistArray = [];

billboard.getChart('hot-100', (err, chart) => {
  if (err) {
    console.error(err);
    return;
  }
  // 提取艺人名称到数组
  artistArray = chart.songs.map(song => song.artist);
  // 挂载到window全局对象
  window.artistArray = artistArray;
  // 可选：触发自定义事件，通知页面数据已加载完成
  window.dispatchEvent(new CustomEvent('chartDataReady', { detail: artistArray }));
});

重新执行Browserify打包命令：

browserify main.js -o bundle.js

在HTML中使用时，注意异步加载的问题：因为getChart是异步操作，页面刚加载完时artistArray可能还未赋值，建议通过监听自定义事件来安全获取数据：

<script src="bundle.js"></script>
<script>
// 监听数据加载完成事件
window.addEventListener('chartDataReady', (event) => {
  const artists = event.detail;
  console.log('Billboard Hot 100艺人榜单：', artists);
  // 在这里处理你的数据逻辑
});
</script>

解决方案2：用模块导出配合Browserify的全局暴露 #

如果你更倾向于保持模块风格，可以在main.js中导出变量，再通过Browserify的--standalone参数打包成UMD模块，让它既能在Node环境使用，也能在浏览器全局访问：

修改main.js：

const billboard = require('billboard-top-100');
let artistArray = [];

module.exports = {
  getArtistArray: () => artistArray,
  loadChartData: (callback) => {
    billboard.getChart('hot-100', (err, chart) => {
      if (err) {
        callback(err);
        return;
      }
      artistArray = chart.songs.map(song => song.artist);
      callback(null, artistArray);
    });
  }
};

打包时添加--standalone参数（指定全局变量名，比如BillboardData）：

browserify main.js --standalone BillboardData -o bundle.js

在HTML中使用：

<script src="bundle.js"></script>
<script>
// 调用加载数据的方法
BillboardData.loadChartData((err, artists) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('艺人榜单数据：', artists);
  // 或者通过getArtistArray获取已加载的数据
  console.log(BillboardData.getArtistArray());
});
</script>

内容的提问来源于stack exchange，提问作者Jack Eggert