使用webpack mix编译后如何在index.html调用table.js导出的函数

问题原因 #

你使用了ES Module语法export导出函数，经过Webpack/Mix编译后，所有模块内部的变量、函数默认都会被封装在webpack的模块闭包内，不会自动挂载到全局window对象上，所以html里直接调用set_table就会报未定义错误。

最优解决方案（按适配场景优先级排序） #

方案1：手动挂载到window对象（最适配你的单函数暴露场景） #

直接修改table.js代码，把需要对外暴露的函数挂载到全局window上：

let table;

function set_table(table) {
  this.table = table;
  console.log("function called successfully");
}

// 新增：挂载到全局window对象
window.set_table = set_table;

export {set_table}; // 其他模块如果需要import导入可以保留该行，不需要可以直接删除

修改后重新编译，html中原有的调用代码不需要做任何改动即可正常运行。

方案2：配置Webpack打包为UMD全局库（适合多函数批量暴露场景） #

如果有多个函数/变量需要对外暴露，可以直接修改webpack.mix.js配置，将table.js打包为全局可用的UMD库：

// webpack.mix.js 新增/修改配置
mix.js('你的table.js原路径', '编译后输出路径')
  .webpackConfig({
    output: {
      library: 'TableUtils', // 自定义的全局变量名
      libraryTarget: 'umd'
    }
  })

编译后在html中可以直接通过你定义的全局变量名调用对应函数：

<script type="text/javascript">
  TableUtils.set_table("test");
</script>

方案3：使用ES Module引入（无需修改webpack配置，仅适配现代浏览器） #

如果不需要兼容IE等旧版浏览器，可以直接将html中的script标签改为module类型，用import语法导入函数：

<!-- 移除原有引入table.js的script标签，直接用模块化script -->
<script type="module">
  // 路径替换为你编译后的table.js实际访问路径
  import { set_table } from './table.js';
  set_table("test");
</script>

注意该方案需要通过http/https协议访问页面，本地直接打开html文件会因为CORS规则报错。

内容的提问来源于stack exchange，提问作者Ashish Kularia