webpack打包后客户端无法访问代码中定义的Chart.js实例变量如何解决

问题原因 #

Webpack 默认会将所有模块内的变量封装在独立的模块作用域中，不会暴露到全局window对象，你定义的myFirstChart变量仅在src/index.js的模块作用域内有效，因此控制台无法直接访问该变量。

解决方案 #

方案1：直接挂载到全局对象（适合开发调试场景，实现最快） #

直接在src/index.js末尾添加一行代码，将实例挂载到全局window上即可：

// src/index.js 新增代码
window.myFirstChart = myFirstChart

修改后重新打包，刷新页面后在控制台直接输入myFirstChart就可以拿到图表实例，调用实例的update()等方法即可完成数据更新操作。

方案2：通过Webpack配置暴露模块导出（适合需要对外暴露多个变量/方法的正式场景） #

第一步：先在src/index.js中将需要对外暴露的内容导出：

// src/index.js 末尾新增导出
export { myFirstChart }

第二步：修改webpack.config.js配置，补充library相关配置项，注意要先引入path模块避免打包报错：

// 补充path模块引入
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        // 新增全局暴露配置
        library: 'MyApp',
        libraryTarget: 'window'
    }
}

重新打包后，在控制台输入MyApp.myFirstChart即可获取到图表实例。

注意：如果是生产环境不需要对外暴露实例，记得删掉调试用的全局挂载代码，或者通过环境变量判断仅在开发环境生效。

内容的提问来源于stack exchange，提问作者Aidan Donnelly